移动端使用 rem 适配及相关问题

在移动端开发中，屏幕尺寸的多样性给页面布局带来了挑战。rem（root em）作为一种相对单位，能够根据根元素（通常是 <html> 元素）的字体大小来动态调整页面元素的尺寸，从而实现良好的移动端适配效果。本文将详细介绍 rem 适配的原理、使用方法以及常见问题的解决。

目录#

  1. rem 适配原理
  2. rem 适配的实现步骤
    • 引入适配脚本
    • 设置根元素字体大小
    • 编写 CSS 样式
  3. 常见问题及解决方法
    • 不同设备字体大小差异
    • 1px 边框问题
    • 字体大小适配
  4. 最佳实践
  5. 示例代码
  6. 参考资料

1. rem 适配原理#

rem 是相对于根元素（<html>）的字体大小来计算的单位。例如，如果根元素的字体大小设置为 16px，那么 1rem 就等于 16px。通过动态改变根元素的字体大小，我们可以让页面元素的尺寸根据屏幕大小进行缩放，从而实现适配。

2. rem 适配的实现步骤#

2.1 引入适配脚本#

在页面的 <head> 标签中引入适配脚本，常用的有 lib-flexible 库。可以通过以下方式引入：

<script src="https://g.alicdn.com/fdilab/lib3rd/flexible/0.3.2/?flexible_css.js,flexible.js"></script>

lib-flexible 会根据设备的 dpr（设备像素比）和屏幕宽度动态设置根元素的字体大小。

2.2 设置根元素字体大小#

除了使用 lib-flexible 自动设置外，也可以手动设置。例如，在 CSS 中：

html {
    font-size: 100px; /* 这里的 100px 是一个基准值，可根据实际情况调整 */
}

然后根据屏幕宽度进行媒体查询调整：

@media screen and (min-width: 320px) {
    html {
        font-size: 50px;
    }
}
@media screen and (min-width: 375px) {
    html {
        font-size: 58.59375px;
    }
}
/* 其他屏幕尺寸的媒体查询 */

2.3 编写 CSS 样式#

在编写 CSS 时，使用 rem 作为单位。例如：

.container {
    width: 10rem; /* 假设根元素字体大小为 100px，这里宽度就是 1000px，会根据根字体大小缩放 */
    height: 5rem;
}

3. 常见问题及解决方法#

3.1 不同设备字体大小差异#

  • 问题：不同设备默认字体大小可能不同，导致 rem 计算结果有偏差。
  • 解决方法：在适配脚本或 CSS 中统一设置根元素字体大小基准值，并通过媒体查询精确调整。

3.2 1px 边框问题#

  • 问题：在高清屏（高 dpr）上，使用 1px 边框会显得很粗。
  • 解决方法：
    • 使用 transform: scale(0.5) 等缩放方法实现细边框：
.border-1px {
    position: relative;
}
.border-1px::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform: scale(0.5);
    transform-origin: left top;
}
- 或者使用 `border-image` 等属性。

3.3 字体大小适配#

  • 问题：字体使用 rem 单位时，在一些低端设备上可能显示不清晰。
  • 解决方法：可以结合 px 和 rem，例如：
body {
    font-size: 14px; /* 基础字体大小 */
    font-size: 0.875rem; /* 换算成 rem，假设根字体大小为 16px */
}

4. 最佳实践#

  • 优先使用 lib-flexible 等成熟的适配库，减少手动计算。
  • 对于复杂布局，采用 rem 结合 flex 布局等方式，提高适配灵活性。
  • 测试多种设备，确保适配效果。

5. 示例代码#

<!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: 100px;
        }
 
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
 
        @media screen and (min-width: 375px) {
            html {
                font-size: 58.59375px;
            }
        }
 
        body {
            margin: 0;
            padding: 0;
        }
 
        .box {
            width: 10rem;
            height: 5rem;
            background-color: lightblue;
            margin: 1rem auto;
        }
    </style>
</head>
 
<body>
    <div class="box"></div>
</body>
 
</html>

6. 参考资料#

通过以上介绍，希望能帮助你更好地理解和应用 rem 适配在移动端开发中，解决各种适配问题，打造出优秀的移动端页面。

2026-03