rem是什麼?
rem(font size of the root element)是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位,em(font size of the element)是指相對于父元素的字型大小的單位。它們之間其實很相似,只不過乙個計算的規則是依賴根元素乙個是依賴父元素計算。
相容性:
目前,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單位設定成相應的百分比即可;
例子:
/*16px * 312.5% = 50px;*/
html
/*50px * 0.5 = 25px;*/
body
一般情況下,是這樣子使用的
html
body
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。就算對不支援的瀏覽器,應對方法也很簡單,就是多寫乙個絕對單位的宣告。這...