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

2022-09-20 08:51:14 字數 599 閱讀 6788

前言

一、rem1.js

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

export function rem (doc, win) else

};if (!doc.addeventlistener) return;

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

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

recalc();

};二、rem2.js

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

export程式設計客棧 function re程式設計客棧m() ;

};三、rem3.js

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

export function rem()

總結本文標題: 關於rem適配的3種常用封裝

本文位址:

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

一 rem1.js 第一種方法考慮了m端螢幕旋轉的問題.對相容性做出了一定的處理,具體看 1 2345 6789 1011 1213 1415 1617 1819 exportfunctionrem doc,win else if doc.addeventlistener return win.ad...

關於移動端的尺寸適配問題(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適配 以上方案實際開發中本人都已經使用過,後來最終選擇第三種方案。為什麼呢?第一種響應式方案,看似簡單,實際開發中...