移动端rem布局屏幕适配插件(放js中便可使用)

/*
  doc:不用管:document对象
  win:不用管:window对象
  design:注意:设计稿的尺寸/物理像素
*/
(function (doc, win,design) {
// alert(123)
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>design){
docEl.style.fontSize = 100 * (clientWidth / design) + 'px';
}
else if(clientWidth==design){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / design) + 'px';
}
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window,375);

/*
window.onload = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
window.onresize = function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
};
};
*/
posted on 2019-05-09 10:55  Web引领者  阅读(1920)  评论(0编辑  收藏  举报