在平常做**寫**的時候一般都是使用px，在之前的學習時就略微的學習了一些關於em、rem的知識，但是由於一直沒有用到過，所以幾乎全部忘記了。今天在研究一些知識的時候用到了em，所以特意將學到的知識總結一下。
1.em
em是相對長度單位，相對於當先物件中的字型尺寸。比如在某個div中font-size設定為20px，那麼，1em就相當於20px，0.25em就相當於5px。由於瀏覽器的預設字型大小為16px，所以為了簡化font-size的換算，就要在body的選擇器中將font-size設定為62.5%，換算成畫素，就是16*62.5%=10px，這樣在之後的設定尺寸大小的時候就可以用1.2em代表12px，也就是說此時的換算關係就是1em=10px。
值得注意的是em會整合父級元素的字型大小。所以不要輕易的在當前元素中改變em。
2.rem
rem和em有相似的使用方法，都是相對長度單位。不同的是rem需要在根元素html的css選擇器中設定font-size,設定font-size為14px，則1rem就是14px。使用這個長度單位的好處是可以用於做適配。可以直接在中更改font-size就可以在不同的移動端顯示不同大小的元素。我們都知道瀏覽器預設的字型大小都是16px,因此在一些書中會這樣寫到：將html的font-size設定成62.5%，這樣就是10px,那麼接下來的0.1rem就是1px了，這樣好算。但是，在實際中我發現在谷歌瀏覽器中這個方法是不可行的。
因為在谷歌瀏覽器中的預設字型大小雖然是16px，但是在html中卻不可以將字型設定小於12px，如果小於12px就會預設以12px來計算。這樣的話我們的62.5%為10px就破滅了。所以在我看來可能最好的方法就是設定成為20px了，也就是在html中設定字型為125%或是直接20px。
關於rem布局的理解
將頁面的 設計稿等比例的進行縮放 首先是計算視覺稿到頁面的比例 假設這個比例是a a 視覺稿的寬度 頁面的寬度 document.documentelement.clientwidth 根據這個比率去計算 螢幕上應該顯示的寬度 假設這個值是 b b 量取的寬度 a 現在我們獲取了元素在螢幕上顯示的乙...
關於rem 布局的理解
頁面中使用的rem單位是相對於 html 這個根節點的作為參考，預設的情況下html的字型大小16x,在什麼也不做處理的情況下，頁面中如果使用了rem，那麼這時候的1rem表示的就是1 16 16px 2rem表示的就是32px的大小 在寫手機端頁面時封裝的rem自適應js檔案如下 這個js裡面設定...
關於布局以及rem的小結
動態計算html的font size，核心是切換不同移動裝置通過js獲取裝置寬度，然後按比例計算html的font size的值，動態變化。var d document.documentelement 獲取html元素 var cw d.clientwidth 750 d.style.fontsiz...