移动端页面使用rem来做适配

使用rem进行响应式布局

最新推荐文章于 2025-10-06 06:46:41 发布

原创最新推荐文章于 2025-10-06 06:46:41 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#适配 #rem #移动端适配

前端笔记专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用rem单位实现响应式布局的方法。通过根据不同设备宽度调整根元素的字体大小，使页面元素随屏幕宽度变化而变化，提高用户体验。

rem来做适配

以前我们往往这样做页面：viewport width 设置为 device-width，然后选我们需要兼容设备的最小宽度（一般是320px）。根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上，页面的字体大小，内容尺寸都是一样的，不同的是，大屏的内容间的空隙比小屏的大。所以这样做的缺点就是，页面在某些尺寸的设备上显示的效果不好。

如果用rem来页面，我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽，字体越大。然后对原本使用px的地方使用rem来替换。这样，字体大小，内容尺寸，对随着屏幕宽度的变大而变大。

具体做法

1 根据不同的设备宽度在根元素上设置不同的字体大小。
为了能将设计稿中的 px 方便的转换为页面中 rem，我设置 1rem 为宽度为 640px 的设计稿中的 100px。代码如下

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 540) { // 最大宽度
            width = 540;
        }
        var rem = width / 6.4; 
        docEl.style.fontSize = rem + 'px';
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window)

做页面时

设计图除以100就可以直接写rem了。。