移动端 REM 适配方案

relorner

已于 2025-02-11 17:58:43 修改

阅读量1k

点赞数 18

文章标签：前端 css

于 2025-02-11 14:11:38 首次发布

本文链接：https://blog.youkuaiyun.com/relorner/article/details/145570557

版权

移动端REM适配方案详细介绍

移动端 REM 适配方案是一种通过动态调整根元素（<html>）的字体大小（font-size），来实现页面元素按比例缩放的技术。REM（Root EM）是相对于根元素字体大小的单位，因此通过控制根元素的字体大小，可以实现页面的整体缩放。

以下是几种常见的移动端 REM 适配方案，包括原理、实现方式和代码示例。

方案 1：基于设计稿宽度动态计算 REM

这是最常用的 REM 适配方案，通常以设计稿宽度（如 750px）为基准，动态计算根元素的 font-size。

实现原理

假设设计稿宽度为 750px，设定 1rem = 设计稿宽度的 1/10，即 75px。
根据设备的实际宽度，动态调整根元素的 font-size，使页面元素按比例缩放。

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REM 适配方案</title>
    <style>
        /* 设置默认字体大小 */
        html {
            font-size: 16px;
        }
        body {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 10rem; /* 10rem = 750px（设计稿宽度） */
            height: 5rem; /* 5rem = 375px */
            background-color: #f4f4f4;
            text-align: center;
            line-height: 5rem;
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <div class="box">Hello REM</div>
    <script>
        // 动态计算根元素的 font-size
        function setRem() {
            const designWidth = 750; // 设计稿宽度
            const baseSize = 75; // 1rem = 75px（设计稿宽度的 1/10）
            const scale = document.documentElement.clientWidth / designWidth;
            document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
        }

        // 初始化
        setRem();
        // 监听窗口大小变化
        window.addEventListener('resize', setRem);
    </script>
</body>
</html>

优点

简单易用，适配效果好。
直接根据设计稿宽度计算，开发时可以直接使用设计稿的尺寸。

缺点

需要手动设置设计稿宽度和基准值。

方案 2：基于 `lib-flexible` 的 REM 适配

lib-flexible 是手机淘宝团队开源的一个移动端适配库，它通过动态设置根元素的 font-size 来实现 REM 适配。

实现原理

将屏幕宽度分为 10 份，每份为 1rem。
根据设备的 DPR（设备像素比）动态调整 font-size。

代码实现

安装 lib-flexible：
```
npm install lib-flexible --save
```
在项目中引入：
```
import 'lib-flexible';
```

在 HTML 中使用 REM 单位：

<div class="box" style="width: 10rem; height: 5rem; background-color: #f4f4f4;">
    Hello REM
</div>

优点

自动处理 DPR 和 REM 计算，使用方便。
适合复杂项目。

缺点

需要引入额外的库。
不再推荐使用（手淘团队已停止维护）。

方案 3：VW + REM 结合适配

VW（Viewport Width）是相对于视口宽度的单位，1vw = 视口宽度的 1%。结合 REM 和 VW 可以实现更灵活的适配。

实现原理

使用 VW 设置根元素的 font-size。
页面元素使用 REM 单位。

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VW + REM 适配方案</title>
    <style>
        /* 设置根元素 font-size 为视口宽度的 1/10 */
        html {
            font-size: 10vw;
        }
        body {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }
        .box {
            width: 7.5rem; /* 7.5rem = 750px（设计稿宽度） */
            height: 3.75rem; /* 3.75rem = 375px */
            background-color: #f4f4f4;
            text-align: center;
            line-height: 3.75rem;
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <div class="box">Hello VW + REM</div>
</body>
</html>

优点

不需要 JavaScript，纯 CSS 实现。
适配简单，适合现代浏览器。

缺点

需要手动计算 VW 和 REM 的关系。

方案 4：PostCSS + REM 适配

使用 PostCSS 插件（如 postcss-pxtorem）自动将设计稿中的 px 单位转换为 REM 单位。

实现原理

在构建工具（如 Webpack）中配置 PostCSS 插件。
开发时直接使用设计稿的 px 单位，插件会自动转换为 REM。

代码实现

安装插件：
```
npm install postcss-pxtorem --save-dev
```

配置 postcss.config.js：

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 75, // 1rem = 75px
            propList: ['*'], // 转换所有属性
            minPixelValue: 2, // 最小转换像素
        },
    },
};

在 CSS 中直接使用 px 单位：

.box {
    width: 750px; /* 自动转换为 10rem */
    height: 375px; /* 自动转换为 5rem */

优点

开发时无需手动计算 REM，直接使用设计稿尺寸。
适合大型项目。

缺点

需要配置构建工具。

总结

在 CSS 中直接使用 px 单位：

.box {
    width: 750px; /* 自动转换为 10rem */
    height: 375px; /* 自动转换为 5rem */

优点

开发时无需手动计算 REM，直接使用设计稿尺寸。
适合大型项目。

缺点

需要配置构建工具。

总结

在这里插入图片描述

移动端 REM 适配方案

移动端REM适配方案详细介绍

方案 1：基于设计稿宽度动态计算 REM

实现原理

代码实现

优点

缺点

方案 2：基于 lib-flexible 的 REM 适配

实现原理

代码实现

优点

缺点

方案 3：VW + REM 结合适配

实现原理

代码实现

优点

缺点

方案 4：PostCSS + REM 适配

实现原理

代码实现

优点

缺点

总结

优点

缺点

总结

方案 2：基于 `lib-flexible` 的 REM 适配