移动端自适应之rem布局(原生js实现)

原创于 2019-04-07 23:52:30 发布 · 788 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

移动web端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用REM单位实现响应式布局的方法，通过JS动态调整根元素字体大小来适配不同设备屏幕宽度，确保了网页在各种设备上的良好显示效果。

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

页面最大宽度 750px

html{
    font-size:75px;
}

/* 不希望rem单位，影响页面元素布局 (在body处阻断html的font-size向下遗传) */
body {
    font-size: 16px;
}

// js方式,动态调整布局(setRem.js)

function setRem() {
    //获取屏幕的宽度
    var w = window.innerWidth;
    if (w > 750) {
        w = 750;
    }
    if (w < 320) {
        w = 320;
    }
    document.documentElement.style.fontSize = w / 10 + 'px';
}
setRem();

//当前屏幕宽度变化时，动态设置rem的大小
window.onresize = function () {
    setRem(); 
}