Html5移動端網頁端適配 js rem

2021-10-18 22:46:11 字數 524 閱讀 2497

業務場景:由於需求是適配兩端螢幕,所以剛開始想的css用rem寫,但是還是會出現字型和布局不會等比縮放的情況,後來找到一種js**針對根元素去做的縮放配置,加上rem和這個js的設定就能做到等比縮放。

在這裡插入描述

在這裡插入描述

重啟,效果圖:

在這裡插入描述

2. 新建乙個index.js,把下方**複製進去,即可使用。12

3456

78910

1112

1314

1516

1718

//適配相容

(function (doc, win) ;

recalculate();

if (!doc.addeventlistener) return;

win.addeventlistener(resizeevent, recalculate, false);

})(document, window);

到此這篇關於html5移動端網頁端適配(js+rem)的文章就介紹到這了

HTML5移動端適配

基準html 機型寬度 可視區域 螢幕比例 html font site 元素寬度 px 元素寬度 rem iphone6 plus 基準 414px 110px 200px 10rem iphone6 375px 375 414 0.9057 375 414 10 9.058 px iphone5...

HTML5移動端優化

手機端筆記 float在渲染時計算量比較大,儘量減少使用 過多的font size引發css樹的效率 a 避免不必要的dom操作 b 盡量改變class而不是style,使用classlist代替classname c 避免使用document.write d 減少drawimage meta na...

html5移動端開發

移動端開發準備 1 meta標籤的設定 h5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面 忽略將頁面中的數字識別為 號碼 忽略android平台中對郵箱位址的識別 2 重點設定 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1...