(function (doc, win) {
var html = doc.documentElement, // 方法同 document.getElementsByTagName('html')[0]
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
//orientationchange在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件
//resize 当调整浏览器窗口的大小时发生
setRem = function () {
var clientWidth = html.clientWidth;//屏幕的可用宽度
if (!clientWidth) return;
if (window.orientation == 0 || window.orientation == 180) {
//通过window.orientation来判断设备横竖屏(0-180Android横屏)
clientWidth = clientWidth > 750 ? 750 : clientWidth; // 这里是假设在750px宽度设计稿的情况下
} else {
clientWidth = clientWidth > html.clientHeight ? html.clientHeight : clientWidth;
}
html.style.fontSize = 10 * (clientWidth / 750) + 'px';
// 这里是假设在750px宽度设计稿的情况下,1rem = 10px;
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, setRem, false);
doc.addEventListener('DOMContentLoaded', setRem, false);
//当一个 HTML 文档被加载和解析完成后,DOMContentLoaded 事件便会被触发
})(document, window);
设置rem
最新推荐文章于 2024-06-03 23:42:36 发布