首先來說說em的使用

使用者的瀏覽器預設渲染的文字大小是“16px”，換句話說，Web頁面中“body”的文字大小在使用者瀏覽器下預設渲染是“16px”。

而“em”是一個相對的大小，是其相對於元素父元素的大小。比如說：如果在一個< div >設定字型大小為“16px”，此時這個< div >的後代元素教程了是將繼承他的字型大小，除非重新在其後代元素中進行過顯示的設定。此時，如果你將其子元素的字型大小設定為“0.875em”，那麼其字型大小計算出來後就相當於“0.875 x 16px = 14px”。

如果使用者通過瀏覽器的UI控制元件改變了文字的大小，那麼我們整個頁面也會進行放大（或縮小），使用em佈局的話頁面很靈活，不至於使用者改變了瀏覽器的字型後會致使整個頁面崩潰。

設定html的font-size

首先把html的font-size設定為10px（0.625em或62.5%），這樣設定可以方便子元素的計算。例如子元素字型大小設定為1.4em,其計算出來的實際大小就為14px（1.4em x 10px = 14px）。

html 
    font-size: 10px;/*10 ÷ 16 × 100% = 62.5%*/
}
body {
    font-size: 1.6em;/*1.6 × 10px = 16px */
}

因為要做字型的適配，在這裡對html的font-size設定媒體查詢。

例如對於pad，豎屛，我希望字型更大一些，將html的font-size設定為12.5px；則body字型大小變為1.6 × 12px = 20px 。

@media screen and (min-width: 640px)  and (max-width: 768px) and (orientation: portrait){
    html {
        font-size: 12.5px;
    }
}

對於更小的螢幕（手機），豎屛，我希望字型相對較小一些，將html的font-size設定為10.5px；則body字型大小變為1.6 × 11.25px = 18px 。

@media screen and (max-width: 640px) and (orientation: portrait) {
    html {
        font-size
 
: 11.25px;
    }
}