rem等比适配

最新推荐文章于 2024-09-28 15:35:33 发布

13pan

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量99

点赞数

文章标签： css Powered by 金山文档

本文链接：https://blog.csdn.net/lyp1375032715/article/details/129484985

版权

该代码实现了一个基于JavaScript的rem等比适配策略，通过设置基准大小为16，动态计算页面根节点的字体大小，以适应不同屏幕宽度。在窗口大小变化时，会自动调整布局，保证视觉效果的一致性。最大缩放比例限制为2，防止元素过小。

摘要由CSDN通过智能技术生成

直接上代码

// rem等比适配配置文件
// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize =
        baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变浏览器窗口大小时重新设置 rem
window.onresize = function() {
    setRem();
};