關於rem適配的3種常用封裝
阿新 • • 發佈：2018-12-11
在之前寫了一篇關於rem適配的文章，但是沒有給出具體的封裝，那麼今天這裡給出常用的三種方法，分享出來供大家參考學習，下面話不多說了，來隨著小編一起學習學習吧
一、rem1.js
第一種方法考慮了m端螢幕旋轉的問題.對相容性做出了一定的處理,具體看程式碼.
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
export
function
rem (doc, win) {
let docEl = doc.documentElement;
//考慮以及相容了 螢幕旋轉的事件
let resizeEvt = 'orientationchange'
in
window ?
'orientationchange'
:
'resize'
;
let recalc =
function
() {
var
clientWidth = docEl.clientWidth;
if
(!clientWidth)
return
;
if
(clientWidth >= 750) {
docEl.style.fontSize =
'100px'
;
}
else
{
docEl.style.fontSize = 100 * (clientWidth / 750) +
'px'
;
}
};
if
(!doc.addEventListener)
return
;
win.addEventListener(resizeEvt, recalc,
false
);
// 螢幕大小以及旋轉變化自適應
doc.addEventListener(
'DOMContentLoaded'
, recalc,
false
);
// 頁面初次開啟自適應
recalc();
};
|
二、rem2.js
採用html標籤的offsetWidth長度計算,
?| 1 2 3 4 5 6 7 8 |
export
function
rem() {
var
fz = document.querySelector(
'html'
).offsetWidth / 7.5;
//設計圖 750 1rem=100px
document.querySelector(
'html'
).style.fontSize =
fz <= 100 ? fz +
'px'
:
'100px'
;
window.onresize =
function
() {
rem();
};
};
|
三、rem3.js
採用window.innerWidth計算,設定了body fontSize防止字型繼承,使頁面字型過大.
?| 1 2 3 4 |
export
function
rem() {
document.documentElement.style.fontSize = window.innerWidth / 7.5 +
'px'
;
//1rem = 100px
document.body.style.fontSize =
'14px'
;
// 在body上將字型還原大小，避免頁面無樣式字型超大
}
|