rem的使用方法

2022-01-14 03:10:27 字數 821 閱讀 9102

在css定義

@media only screen and (min-width: 320px)

}@media only screen and (min-width: 640px)

}@media only screen and (min-width: 750px)

}@media only screen and (min-width: 1242px)

}

瀏覽器預設字型都是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單位設定成相應的百分比即可;

例子:

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

html

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

body

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

html 

body

p

rem布局使用方法

下面的 一是我根據rem的使用經驗,自己寫的乙個rem.js,發現很好用,能適用所有移動端h5頁面的自適應需求 一 window.onload function window.onresize function function getrem pwidth,prem 下面的 二,是小公尺的移動端h5...

關於rem的使用方法

rem font size of the root element 是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位,em font size of the element 是指相對于父元素的字型大小的單位。它們之間其實很相似,只不過rem計算的規則是依...

rem詳解及使用方法

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