方案一:
function remSize(){
// 获取设备宽度:
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
if(deviceWidth >=750){
deviceWidth=750
}
if(deviceWidth<=320){
deviceWidth = 320
}
// 设置根目录的字体大小:
document.documentElement.style.fontSize = (deviceWidth/7.5) +'px'
document.body.style.fontSize= 0.16 + 'rem'
}
remSize()
window.onresize=function(){
remSize()
}
方案二
let active_w = 375;
let active_s = 20;
let new_w = document.documentElement.clientWidth
document.documentElement.style.fontSize = (active_s * new_w / active_w)+'px';
window.onresize=function(){
let new_w = document.documentElement.clientWidth
document.documentElement.style.fontSize = (active_s * new_w / active_w)+'px'
}
方案三
(function(win) {
var docEl = win.document.documentElement;
var time;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 768) { // 最大宽度
width = 768;
}
var rem = width / 375*100;
docEl.style.fontSize = rem + 'px';
///rem用font-size:50px来进行换算
}
win.addEventListener('resize', function() {
clearTimeout(time);
time = setTimeout(refreshRem, 1);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(time);
time = setTimeout(refreshRem, 1);
}
}, false);
refreshRem();
})(window);