移動端rem學習

2021-08-29 04:58:25 字數 714 閱讀 6855

rem: 用來替換px的單位,在頁面根元素設定大小後,每個rem就是頁面根元素的大小,例:

html 

h1 /* 2 × 12px = 24px */

p /* 1.5 × 12px = 18px */

div /* 20 * 12px = 240px*/

rem和em的區別: rem是以根元素字型大小為基準,em是以父元素字型大小為基準(可以在本身元素上設定font-size為多少em來覆蓋父元素的font-size)

rem的計算: 

一: js計算

const ohtml = document.getelementsbytagname('html')[0] // 獲得html

const width = ohtml.clientwidth; // 獲得頁面寬度

// 320px的螢幕基準畫素為12px

ohtml.style.fontsize = 12 * (width / 320) + "px";

二: **查詢

@media screen and (min-width: 375px)

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

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

}html

移動端rem學習理解

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

JS PC端設定rem 移動端設定rem

window.onresize function 頁面剛重新整理時呼叫 init function init const basesize 32function setrem 初始化 setrem window.onresize function 這裡是乙個pc和h5的 rem樣式 寫在了乙個htm...

移動端rem使用

1 移動端設計圖750時,html font size 50px。使用方法 1 新增viewport。2 在頁面最裡面引入該段js 建議在head裡面引入 3 css 的編寫,設計圖為750px時,頁面標註大小除以100即可,例如 設計圖標註的是,寬300px,高300px。使用rem就是,widt...