配置rem

2021-09-06 23:04:56 阅读：174 来源： 互联网

标签：字体大小配置 html rem var deviceWidth document

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

}

标签：字体大小,配置,html,rem,var,deviceWidth,document
来源： https://blog.csdn.net/sshaohui/article/details/120146856

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

配置rem