rem 适配全过程

我给你画一张 从设计稿 → 手机页面的完整 rem 适配流程图，一步一步看就很清晰。

1 设计稿（UI 给你的图）

设计师给的是 750px 宽设计稿：

lua 复制代码

设计稿（750px）

|------------------------------------------------|
|                                                |
|                750 px                          |
|                                                |
|     [ 按钮 150px ]                              |
|                                                |
|------------------------------------------------|

例如按钮：

复制代码

按钮宽度 = 150px

2 我们规定一个规则（关键）

为了方便计算，前端规定：

ini 复制代码

设计稿 100px = 1rem

所以：

ini 复制代码

150px ÷ 100 = 1.5rem

代码写成：

css 复制代码

button{
  width:1.5rem;
}

这一步只是 把 px 换成 rem。

3 整个设计稿宽度换算

设计稿：

复制代码

750px

根据规则：

ini 复制代码

750 ÷ 100 = 7.5rem

所以我们认为：

vbscript 复制代码

整个屏幕宽度 = 7.5rem

图示：

lua 复制代码

设计稿

|----------------750px----------------|

换算成 rem

|--------------7.5rem-----------------|

4 JS 根据手机宽度计算 rem

JS代码：

ini 复制代码

html.style.fontSize = 屏幕宽度 / 7.5

意思就是：

ini 复制代码

7.5rem = 手机屏幕宽度

5 举个真实手机例子

iPhone 8

屏幕宽度：

复制代码

375px

计算：

ini 复制代码

375 ÷ 7.5 = 50

所以：

ini 复制代码

1rem = 50px

图示：

ini 复制代码

手机屏幕

|--------------375px--------------|

换算

|--------------7.5rem-------------|

1rem = 50px

6 元素最终大小

按钮：

vbscript 复制代码

1.5rem

计算：

ini 复制代码

1.5 × 50 = 75px

页面效果：

lua 复制代码

手机页面

|--------------------------------|
|                                |
|      [按钮 75px]                |
|                                |
|--------------------------------|

7 如果换一个更大的手机

假设：

复制代码

屏幕 = 414px

计算：

ini 复制代码

414 ÷ 7.5 = 55.2

所以：

ini 复制代码

1rem = 55.2px

按钮：

复制代码

1.5 × 55.2 ≈ 82.8px

页面自动变大。

图示：

ini 复制代码

大屏手机

|----------------414px----------------|

1rem = 55.2px

按钮：

|------82.8px------|

8 整个 rem 适配流程图（终极理解）

ini 复制代码

设计稿 750px
      │
      │ 规定
      ▼
100px = 1rem
      │
      ▼
屏幕宽 = 7.5rem
      │
      │ JS计算
      ▼
html font-size = 屏幕宽度 / 7.5
      │
      ▼
不同手机得到不同 rem
      │
      ▼
页面按比例缩放

9 一句话理解

你可以这样记：

ini 复制代码

750设计稿
100px = 1rem
所以屏幕宽 = 7.5rem

JS只是保证：

vbscript 复制代码

7.5rem 永远等于屏幕宽度

页面自然就 等比例缩放。

如果你在准备 前端面试 ，我可以再给你讲一个 90%面试官都会追问的问题：

为什么现在很多项目不用 rem，而改用 vw 适配？

这个问题很多人答不好，但其实 非常简单且很加分。