在之前写了一篇关于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上将字体还原大小，避免页面无样式字体超大
}
|