关于移动端rem适配

最新推荐文章于 2020-11-19 16:24:03 发布

san.hang

最新推荐文章于 2020-11-19 16:24:03 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/DreamerLeaf/p/9667589.html

本文介绍了两种实现移动端网页布局自适应的方法。一种是通过计算屏幕宽度并设置根元素字体大小来实现，使得布局能够根据不同的设备进行缩放。另一种方法则通过监听窗口的方向变化和调整来动态改变字体大小。

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

var num = 1 / window.devicePixelRatio;
var fontSize = document.documentElement.clientWidth / 10;
document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';

适配移动端rem单位，实际使用的时候用量取到的像素值/75即为计算后的rem值，标准为iPhone6的750的尺寸。750px的设计稿的标准宽度为10rem；

补充另一种，本质不变

!function (a, d) {
    function c() {
        var t = document.documentElement.clientWidth,
            i = document.documentElement.clientHeight;
        d.documentElement.style.fontSize = ((t / i) >= 0.75) ? t * 0.1 + "px" : t / 750 * 75 + "px"
    };
    var b = null;
    a.addEventListener("onorientationchange" in a ? "orientationchange" : "resize", function () {
        clearTimeout(b);
        b = setTimeout(c, 300)
    }, !1);
    a.addEventListener("pageshow", function (a) {
        a.persisted && (clearTimeout(b), b = setTimeout(c, 300))
    }, !1);
    d.addEventListener("DOMContentLoaded", c, false)
}(window, document);

转载于:https://www.cnblogs.com/DreamerLeaf/p/9667589.html