關於rem適配的3種常用封裝

2022-09-15 09:21:12 字數 1143 閱讀 4925

一、rem1.js

第一種方法考慮了m端螢幕旋轉的問題.對相容性做出了一定的處理,具體看**.?1

2345

6789

1011

1213

1415

1617

1819

exportfunctionrem (doc, win)else

};

if(!doc.addeventlistener)return;

win.addeventlistener(resizeevt, recalc,false);// 螢幕大小以及旋轉變化自適應

doc.addeventlistener('domcontentloaded', recalc,false);// 頁面初次開啟自適應

recalc();

};

二、rem2.js

採用html標籤的offsetwidth長度計算,?1

2345

678exportfunctionrem() ;

};

三、rem3.js

採用window.innerwidth計算,設定了body fontsize防止字型繼承,使頁面字型過大.?1

234exportfunctionrem()

關於rem適配的3種常用封裝

前言 一 rem1.js 第一種方法考慮了m端螢幕旋轉的問題.對相容性做出了一定的處理,具體看 export function rem doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recalc,...

關於移動端的尺寸適配問題(rem)

近期在做移動端的專案,用到rem的相關知識。先上 css media screen and width 320px media screen and width 360px media screen and width 375px media screen and width 414px media...

關於移動端rem適配的相關方案研究

1.移動端的相關適配目前探索中已經尋找了很多種的適配方案,1 響應式布局。2 640px 750px做一版移動端的設計圖 em適配 3 640px 750px做一版移動端的設計圖 rem適配 以上方案實際開發中本人都已經使用過,後來最終選擇第三種方案。為什麼呢?第一種響應式方案,看似簡單,實際開發中...