JS——PC端设置rem、移动端设置rem

最新推荐文章于 2024-07-19 10:58:10 发布

HarryHY

最新推荐文章于 2024-07-19 10:58:10 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.csdn.net/HarryHY/article/details/114006503

JS 专栏收录该内容

34 篇文章

订阅专栏

这篇博客详细介绍了如何实现PC端和移动端的REM自适应布局。通过监听窗口大小变化，动态设置HTML元素的字体大小，从而实现不同设备上的适配。在PC端，当窗口宽度大于800px时，使用特定的比例值；而在移动端，基于750px的基础尺寸进行调整。此外，还提供了一个综合的JS实现，兼顾PC和H5页面的样式适配。

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

PC端的rem自适应

window.onresize =function (){// 绑定到窗口缩放的事件
    init();
};
//页面刚刷新时调用
init()
function  init() {
    var whdef = 200 / 1920;
    var wH = window.innerHeight;// 当前窗口的高度
    var wW = window.innerWidth;// 当前窗口的宽度
    var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    // $('html').css('font-size', rem + "px");
    document.documentElement.style.fontSize =rem + "px";
    console.log(rem);
}

移动端的rem自适应

const baseSize = 32
function setRem() {
  const scale = document.documentElement.clientWidth / 750
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化 
setRem()

window.onresize = function () { 
    setRem() 
}

综合JS 的 rem自适应

这里是一个PC和h5的 rem样式写在了一个html里面

    window.onresize = function () {
        init()
    }
    //页面刚刷新时调用
    init()

    function init() {
        if (window.innerWidth > 800) {
            var whdef = 100 / 1920;
            $("#pc").show()
            $("#h5").hide()
        } else {
            var whdef = 100 / 750;
            $("#pc").hide()
            $("#h5").show()
        }
        var wH = window.innerHeight; // 当前窗口的高度
        var wW = window.innerWidth; // 当前窗口的宽度
        var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
        // $('html').css('font-size', rem + "px");
        document.documentElement.style.fontSize = rem + "px";
        console.log(rem);

    }

来个点赞吧
在这里插入图片描述