rem詳解及使用方法

好像有一段時間沒有寫部落格了……今天剛好總結一下rem的使用方法

首先，先說乙個常識，瀏覽器的預設字型高都是16px。步入正題-----〉

目前，ie9+，firefox、chrome、safari、opera 的主流版本都支援了rem。

就算對不支援的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。

css中的body中先全域性宣告font-size=62.5%，這裡的%的演算法和rem一樣。

因為100%=16px，1px=6.25%，所以10px=62.5%，

這是的1rem=10px，所以12px=1.2rem。px與rem的轉換通過10就可以得來，很方便了吧！

注意，rem是只相對於根元素htm的font-size，即只需要設定根元素的font-size，其它元素使用rem單位設定成相應的百分比即可；

例子：

1

/*16px * 312.5% = 50px;*/
2 html

1

/*50px * 0.5 = 25px;*/
2body

一般情況下，是這樣子使用的

1

html 
2body 
3 p

用乙個東西肯定要知道它的好處啦，由於其他字型大小都是基於html的，所以在移動端做適配的時候，可以使用這樣的方法

1

@media only screen and (min-width: 320px)5}
6@media only screen and (min-width: 640px)10}
11@media only screen and (min-width: 750px)15}
16@media only screen and (min-width: 1242px)
20 }

這樣子就能做到僅僅改變html的字型大小，讓其他字型具有「響應式」啦。

又是午睡時間，如果本文有不正確的地方，請指出^_^

rem詳解及使用方法

好像有一段時間沒有寫部落格了 今天剛好總結一下rem的使用方法 首先，先說乙個常識，瀏覽器的預設字型高都是16px。步入正題 目前，ie9 firefox chrome safari opera 的主流版本都支援了rem。就算對不支援的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器...

rem詳解及使用方法

瀏覽器的預設字型高都是16px。使用 單位方便使用 css中的body中先全域性宣告font size 62.5 這裡的 的演算法和rem一樣。因為100 16px，1px 6.25 所以10px 62.5 這是的1rem 10px，所以12px 1.2rem。px與rem的轉換通過10就可以得來，...

rem詳解及使用方法

好像有一段時間沒有寫部落格了 今天剛好總結一下rem的使用方法 首先，先說乙個常識，瀏覽器的預設字型高都是16px。步入正題 相容性 目前，ie9 firefox chrome safari opera 的主流版本都支援了rem。就算對不支援的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這...