如何使用rem單位

最近搞移動端，真是被rem、em與px的換算要了老命了，看了很多文檔，彷佛弄明白了，這不今天用又蒙圈了。

好多文檔上總是說用rem就給html設置font-size，用em就給body設置font-size

看了下bootstrap樣式表，html {font-size:62.5%;}  body {font-size:14px;}，其餘樣式略哈，就講這兩個主要的。

惋惜大姐長了這麼大眼睛，從昨天到今天一直把em當作了rem，致使越算越鬱悶……好不說了，解釋以下：

其實能夠學習bootstrap的這種設置，由於在用到em和rem的時候互不影響，由於rem就是去參照你html的font-size，管你body設不設置，都與我不要緊。

 

1、那麼若是你肯定要使用rem單位，就按如下三個步驟來計算：

一、肯定基數：通常10px，本身記住就行，不用寫進代碼裏

二、html {font-size:百分數;}    百分數=基數/16  

　　基數10    百分數62.5%

　　基數14    百分數87.5%

三、px換算rem   公式=想要的px值/基數

　　也就是說，當你設置 html {font-size:62.5%;}，你想給容器裏的文字設置字號14px，換算成rem就是14px/10——1.4rem 這樣子

　　（若是本身想要測試的話，拿火狐Firebug測試，由於Chrome下字號低於12px失效哈，若是想設置小於12px的字號，Chrome也有解決方案，本身百度就好）

 

2、若是使用em單位的時候，計算機就會本身去找你body的設置，纔不會管你html是如何設置的呢

好比咱們偉大的bootstrap給 body {font-size:14px;} 這樣設置後，若是我想要一個14px的外邊距，我就用14px/14px——1em 這樣啦。

以上是我本身總結的，若有錯誤，歡迎你們來指正哦~~