配置rem

rem 是一种相对单位,rem是相对与html元素字体大小来说的,这也就很好理解为什么是root em了,因为html是跟元素啊,这也就好理解了。

使用rem跟媒体查询结合的话,可以实现设备屏幕变化,页面显示也随着变化,从而达到适配不同手机屏幕的效果。

如何计算rem的大小
公式 页面元素的rem值 = 页面元素的px / html的字体大小
html字体大小 = 设计稿的宽度 / 分成的等分(15或者10或者其他)

rem:相对html根元素字体大小 —— html

export default function() {
// 7.5根据设计稿的横向分辨率/100得来
var deviceWidth = document.documentElement.clientWidth;
// var deviceWidth = window.screen.availWidth
// console.log(navigator.userAgent)
// console.log(deviceWidth)
// console.log(navigator.userAgent)
if(deviceWidth > 750) {
// deviceWidth = 750;
deviceWidth = 7.5 * 100;
}

document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

// 禁止双击放大
document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
    var now = Date.now();
    if (now - lastTouchEnd <= 300) {
        event.preventDefault();
    }
    lastTouchEnd = now;
}, false);

}

上一篇:取模与取余的区别


下一篇:【BatchProgram】工作用的小工具 - 自动访问常用页面