關於rem的使用方法

2021-09-26 19:49:21 字數 1003 閱讀 3701

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

簡單來說rem就是在自適應螢幕下,用來改變字型大小的。

首先,瀏覽器的預設字型大小都是16px。

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

就算對不支援的瀏覽器,應對方法也很簡單,就是多寫乙個絕對單位(比如px)的宣告。

如圖所示

使用js轉換

引入原生js**重置rem單位:

核心**如下

(function (doc, win) else

};if (!doc.addeventlistener) return;

win.addeventlistener(resizeevt, recalc, false);

doc.addeventlistener('domcontentloaded', recalc, false);

})(document, window);

此是iphone 5介面卡下的效果圖

此是iphone 6/7/8介面卡下的效果圖

rem的使用方法

在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 wid...

rem布局使用方法

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

rem詳解及使用方法

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