首先宣告: 瀏覽器的預設字型高都是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;*/一般情況下,是這樣子使用的2 body
1 html由於其他字型大小都是基於html的,所以在移動端做適配的時候,可以使用這樣的方法2 body
3 p
1 @media only screen and (min-width: 320px)這樣子就能做到僅僅改變html的字型大小,讓其他字型具有「響應式」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 }
關於rem布局
我們知道,當使用rem布局,並配合js動態按照比例設定html標籤上的rem值時,整個頁面是按照螢幕的寬度來整體縮放的。對於高度不限制的頁面 也就是超出一屏頁面可以滾動 這種方案沒有任何問題,簡單暴力。但是對於一些需要布滿一整屏的頁面 比如現在流行的上下 左右滑動的那種 由於乙個頁面的元素必須在乙個...
關於rem布局摘錄
一般情況下使用em或者rem的時候,會寫個樣式 html,body html,這樣設定方便了em rem與px相互轉換,因為瀏覽器預設字型大小16px,所以em的初始值為1em 16px。當設定了body時,1em則 16px 62.5 10px。但是由於谷歌不相容,所以我個人習慣使用 html。目...
關於rem適配移動端
function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,false documen...