rem在移動端的應用

2021-09-25 03:55:08 字數 639 閱讀 9995

1rem為頁面根目錄的字型大小。

若:html;

1rem = 20px

在移動頁面的具體應用。

移動端的設計稿一般都是iphone6為基礎設計的,設計稿的寬為750px;

手機的物理尺寸是375px;所以在用css的時候,設計尺寸需要初以2;

要用rem完成移動端的適配,需要固定瀏覽器的顯示寬度不變。

第一:設定meta頭

第二:js動態地設定,根目錄的字型大小;

document.documentelement.style.fontsize = document.documentelement.clientwidth / 7.5 + 'px';
第三:設計稿的尺寸除以100,得到相應的rem值。

比如:設計稿螢幕全寬為750px,此時css就為7.5rem;

反向推:

js設定的字型大小為:375px除以7.5得50px;

7.5rem乘以50px得到的是375px剛好是螢幕的滿寬。

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

移動端rem布局

時隔半年,再次回顧移動端開發,感覺自己又張知識了 我們平常用的較多的單位是px,百分比,rem,em,vw,vh,但是在移動端用的比較多的還是rem,但是他在用的過程中要注意什麼呢,怎麼用呢,下面就開始啦。他是乙個度量單位,可以用他作為高寬,字型的單位。他以html中設定font size的大小為基...