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);
}