移动端px、rem兼容适配和转换

最新推荐文章于 2025-04-04 17:09:32 发布

吃糖牙疼

最新推荐文章于 2025-04-04 17:09:32 发布

阅读量470

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43997143/article/details/105645156

版权

css 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了一种基于REM单位的移动端网页适配方案，通过动态调整根元素字体大小实现不同屏幕尺寸下的布局自适应。提供了具体的JavaScript和CSS代码实现，确保在多种设备上都能获得良好的视觉效果。

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

移动端px、rem兼容适配和转换

这是按照720的大小做的适配，计算公式为：(document.documentElement.clientWidth / 设计图大小) * 100

//手机端的适配
document.addEventListener("DOMContentLoaded", function () {
    document.getElementsByTagName("html")[0].style.fontSize = (document.documentElement.clientWidth / 720) * 100 + "px";
});
window.onresize = function () {
    document.getElementsByTagName("html")[0].style.fontSize = (document.documentElement.clientWidth / 720) * 100 + "px";
};

@media (min-width: 320px) {
    html {
        font-size: 44px;
    }
}

@media (min-width: 360px) {
    html {
        font-size: 50px;
    }
}

@media (min-width: 375px) {
    html {
        font-size: 52px;
    }
}

@media (min-width: 384px) {
    html {
        font-size: 53px;
    }
}

@media (min-width: 414px) {
    html {
        font-size: 57px;
    }
}

@media (min-width: 448px) {
    html {
        font-size: 62px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 66px;
    }
}

@media (min-width: 512px) {
    html {
        font-size: 71px;
    }
}

@media (min-width: 544px) {
    html {
        font-size: 72px;
    }
}

@media (min-width: 576px) {
    html {
        font-size: 80px;
    }
}

@media (min-width: 608px) {
    html {
        font-size: 84px;
    }
}

@media (min-width: 640px) {
    html {
        font-size: 88px;
    }
}

@media (min-width: 720px) {
    html {
        font-size: 100px;
    }
}