配置rem

最新推荐文章于 2025-02-27 09:58:12 发布

宋绍辉--

最新推荐文章于 2025-02-27 09:58:12 发布

阅读量1.3k

点赞数

分类专栏： js vue 文章标签： javascript android html

本文链接：https://blog.youkuaiyun.com/sshaohui/article/details/120146856

版权

js 同时被 2 个专栏收录

16 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍了rem作为相对单位在响应式布局中的应用，通过调整html根元素的字体大小来改变页面元素尺寸。结合媒体查询，可以确保页面在不同设备屏幕尺寸下展示效果良好。计算rem值的公式为页面元素的rem值等于其px值除以html的字体大小，通常根据设计稿的宽度进行换算。此外，文中还提供了禁用双击放大的处理方式，以优化移动端用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

}