移動端rem學習理解

2021-09-26 19:55:31 字數 652 閱讀 7375

rem和px的區別
所有現代瀏覽器下預設字型尺寸是16px,這時1em=16px。然後你人為的把body裡面定義font-size:12px;(把瀏覽器預設16px改小了),此刻1em=12px,如果0.8em實際等於12px*0.8;em的用處是你要整個網頁字型統一變大變小你只要改body裡面font-size的值就行了

下面就是用js寫的設定rem的font-size

(function (doc, win) else

};if (!doc.addeventlistener) return;

win.addeventlistener(resizeevt, recalc, false);

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

})(document, window);

rem是為了方便更好的相容各種移動端頁面的尺寸,保證在各種移動端都不會崩潰。
為了在移動端更好的適配。1rem=16px ,如果我們換算起來還是比較麻煩的所以用js將font-size的尺寸設定為1rem=100px是為了更好的換算。

以上是本人對rem的簡單理解,如果有說的不好的地方請聯多包涵。

移動端rem學習

rem 用來替換px的單位,在頁面根元素設定大小後,每個rem就是頁面根元素的大小,例 html h1 2 12px 24px p 1.5 12px 18px div 20 12px 240px rem和em的區別 rem是以根元素字型大小為基準,em是以父元素字型大小為基準 可以在本身元素上設定f...

移動端rem使用及理解

先上 window.onload function window.onresize function function getrem pwidth,prem 首先我們要明白為什麼使用rem,rem有什麼作用?rem 繼承於html的font size大小,比如html的font size等於16px...

移動端rem 與 em的理解

1 移動端如果使用rem是怎麼換算px單位的 轉化為px的大小取決於頁根元素的字型大小,即 html 元素的字型大小。根元素字型大小乘以你 rem 值。例如,根元素的字型大小 16px,設定width為10rem 實際上的畫素值就為160px,即 10 x 16 160 優點 1 自適應效果好 2 ...