配置rem

本文主要是介绍配置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);

}

这篇关于配置rem的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！