//在不同设备大小下,只要更改html的font-size值即可
(function(win) {
var doc = win.document;
var docEl = doc.documentElement;
//以上两行代码获取页面的html,和document.querySelector('html') 结果一样
var tid;
function refreshRem() {
//当前window视口的宽度
var width = docEl.getBoundingClientRect().width;
if (width > 640) { // 最大宽度
width = 640;
}
var rem = width / 20; // 将屏幕宽度分成20份, 每份为1rem
//为html设置font-size值
docEl.style.fontSize = rem + 'px';
}
//window 的视口改变时,触发resize事件
win.addEventListener('resize', function() {
//清除上一次html 中font-size 值 ,即rem值
clearTimeout(tid);
//设置设备切换后 html中font-size值
tid = setTimeout(refreshRem, 300);
}, false);
//pageshow每次加载页面时被触发,onload是第一次加载页面时,被触发
win.addEventListener('pageshow', function(e) {
//e.persisted=true 如果页面是从缓存中获取
if (e.persisted) {
clearTimeout(tid);//在一次刷新rem值,
tid = setTimeout(refreshRem, 300);
}
}, false);
//页面刚打开时,求rem值
refreshRem();
})(window);
自适应设备屏幕布局
最新推荐文章于 2019-02-18 22:43:31 发布