關於rem記錄

2022-09-15 20:57:19 字數 957 閱讀 9367

首先宣告:  瀏覽器的預設字型高都是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 

2 body

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布局,並配合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...