原理#

em（root em）是 CSS 中的相对长度单位，它的大小取决于根元素 html 的 font-size。

rem 布局的核心原理：通过 JavaScript 根据视口宽度动态修改 html 的 font-size，使使用 rem 单位的元素随屏幕宽度等比例缩放。

例如：

1
html {
2
  font-size: 10px;
3
}
4

5
.box {
6
  width: 10rem;  /* 100px */
7
  height: 5rem; /* 50px */
8
}

当 html 的 font-size 变成 5px 时：

1
html {
2
  font-size: 5px;
3
}

元素的实际尺寸随之改变：

• 宽度：10 × 5 = 50px
• 高度：5 × 5 = 25px

因此，只需要动态调整根元素的字体大小，就能控制所有使用 rem 单位的元素尺寸。

实现#

以 750px 宽度的移动端设计稿为例，实现底部 Tabbar 的等比例缩放。确定设计稿的基准值，假设设计稿尺寸：

• 设计稿宽度：750px
• Tabbar 高度：96px

为了方便计算，规定设计稿中：

1
1rem = 10px

那么：

[ 750 \div 10 = 75rem ]

Tabbar 的高度：

[ 96 \div 10 = 9.6rem ]

因此，我们需要在不同屏幕下始终保持：

[ htmlFontSize = \frac{viewWidth}{75} ]

动态设置根元素字体大小

1
const docEl = document.documentElement;
2

3
const setHtmlFontSize = () => {
4
  const viewWidth = docEl.clientWidth;
5
  const htmlFontSize = viewWidth / 75;
6

7
  docEl.style.fontSize = htmlFontSize + 'px';
8
};
9

10
setHtmlFontSize();
11

12
window.addEventListener('resize', setHtmlFontSize);

代码说明：

• document.documentElement：获取根元素 html。
• clientWidth：获取当前布局视口宽度。
• viewWidth / 75：计算当前屏幕对应的根字体大小。
• style.fontSize：动态设置 html 的字体大小。
• resize：视口宽度变化时重新计算。

不同屏幕下的缩放效果

完整实现

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta
6
      name="viewport"
7
      content="width=device-width, initial-scale=1.0"
8
    />
9
    <title>rem 布局方案</title>
10

11
    <style>
12
      * {
13
        box-sizing: border-box;
14
      }
15

16
      body {
17
        margin: 0;
18
        font-size: 16px;
19
      }
20

21
      .tabbar-layout {
22
        position: fixed;
23
        bottom: 0;
24
        left: 0;
25
        width: 100%;
26
        height: 9.6rem;
27
        box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);
28
      }
29

30
      .tabbar-layout img {
31
        display: block;
32
        width: 100%;
33
      }
34
    </style>
35

36
    <script>
37
      const docEl = document.documentElement;
38

39
      const setHtmlFontSize = () => {
40
        const viewWidth = docEl.clientWidth;
41
        const htmlFontSize = viewWidth / 75;
42

43
        docEl.style.fontSize = htmlFontSize + 'px';
44
      };
45

46
      setHtmlFontSize();
47

48
      window.addEventListener('resize', setHtmlFontSize);
49
    </script>
50
  </head>
51

52
  <body>
53
    <p>段落</p>
54

55
    <div class="tabbar-layout">
56
      <img src="./tabbar.png" alt="标签栏" />
57
    </div>
58
  </body>
59
</html>

这里有两个值得注意的地方：

第一，body 使用 font-size: 16px，因此段落文字不会随着根元素字体大小的变化而等比例缩放。这可以避免文字随着屏幕宽度无限放大或缩小。

第二，Tabbar 使用 width: 100%，高度使用 rem。也可以将宽度设置为 75rem，但当前情况下使用百分比更简单。

扩展flexible#

什么是 flexible？

lib-flexible 是阿里巴巴移动前端团队推出的一套移动端适配方案，主要用于实现基于 rem 的等比例布局。

GitHub：amfe/lib-flexible

它的核心功能与前面手写的 JavaScript 一样：根据视口宽度，自动设置根元素 html 的 font-size。

不过，它采用了不同的换算规则。

flexible 的计算原理

flexible 经典的计算方式是将视口宽度划分为 10 份：

1
const docEl = document.documentElement;
2

3
const setRemUnit = () => {
4
  const rem = docEl.clientWidth / 10;
5

6
  docEl.style.fontSize = rem + 'px';
7
};

以 750px 设计稿为例：

[ 750 \div 10 = 75px ]

因此：

1rem = 75px（设计稿基准下）

Tabbar 高度为 96px，换算为：

[ 96 \div 75 = 1.28rem ]

CSS：

1
.tabbar-layout {
2
  width: 100%;
3
  height: 1.28rem;
4
}

这样在 375px 的视口下：

[ 1.28 \times (375 \div 10) = 48px ]

flexible 与手写方案的区别

两者没有本质区别，只是采用了不同的 rem 换算基准。

拓展-VScode插件#

在开发中，会计算rem的值，这非常麻烦，这里推荐一个插件px2rem

原理#

rem + vw 布局方案结合了两种单位的特点：

• vw：根据视口宽度动态计算根元素的字体大小。
• rem：根据根元素的字体大小计算元素尺寸。

核心原理：使用 vw 动态设置 html 的 font-size，再使用 rem 实现元素的等比例缩放。

与传统的 JS + rem 方案相比，不再需要 JavaScript 动态计算根元素字体大小，而是直接通过 CSS 实现。

实现#

假设设计稿宽度为 750px，规定在设计稿宽度下：

1
1rem = 100px

那么：

1
html {
2
  font-size: calc(100vw / 7.5);
3
}

计算结果：

例如设计稿中的底部导航栏宽度为 750px，高度为 96px。

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>rem + vw 布局方案</title>
7
  <style>
8
    * {
9
      box-sizing: border-box;
10
    }
11

12
    html {
13
      font-size: calc(100vw / 7.5);
14
    }
15

16
    body {
17
      margin: 0;
18
      font-size: 16px;
19
    }
20

21
    .tabbar-layout {
22
      position: fixed;
23
      bottom: 0;
24
      left: 0;
25
      width: 7.5rem;
26
      height: 0.96rem;
27
      background-color: #eee;
28
    }
29
  </style>
30
</head>
31
<body>
32
  <div class="tabbar-layout">底部导航栏</div>
33
</body>
34
</html>

在不同设备下：

最终实现：视口宽度发生变化时，rem 对应的像素值自动变化，从而实现元素等比例缩放。

怎么计算#

为什么是 100vw / 7.5？

假设：

• 设计稿宽度：750px
• 规定在设计稿宽度下：1rem = 100px

首先：

1
100vw = 750px /* 当视口宽度为 750px 时 */

那么，要让根元素的 font-size 等于 100px：

[ 750 \div 7.5 = 100 ]

所以：

1
html {
2
  font-size: calc(100vw / 7.5);
3
}

其中 7.5 的来源就是：

[ 7.5 = \frac{750}{100} ]

如果 1rem = 10px 呢？

设计稿还是 750px，只是将基准改为：

1
1rem = 10px

那么：

[ 750 \div 10 = 75 ]

代码变成：

1
html {
2
  font-size: calc(100vw / 75);
3
}

对比一下：

这里的 1rem = 100px 和 1rem = 10px 都是指设计稿对应的 750px 视口宽度下的值，并不是在所有屏幕下固定不变。

通用计算公式

例如设计稿宽度为 750px：

除数=设计稿宽度 / 设计稿设定的1rem像素值

原理#

vw 是 CSS 的视口相对单位，1vw 等于视口宽度的 1%。

vw 布局方案的核心原理：将设计稿中的 px 单位换算为 vw，让元素尺寸随着视口宽度变化而等比例缩放。

例如：

换算公式

[ vw = \frac{设计稿中元素的尺寸}{设计稿宽度}\times100 ]

假设设计稿宽度为 750px，其中一个元素的高度为 96px。

[ \frac{96}{750}\times100=12.8vw ]

1
.tabbar {
2
  height: 12.8vw;
3
}

实际效果：

因此，元素能够根据视口宽度进行等比例缩放。

实现#

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
  <meta charset="UTF-8" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <title>VW 布局方案</title>
8
  <style>
9
    img {
10
      width: 100%;
11
    }
12
    body {
13
      font-size: 16px;
14
    }
15
    .tabbar-layout {
16
      position: fixed;
17
      bottom: 0;
18
      left: 0;
19
      box-shadow: 0 -.4rem .4rem rgba(0, 0, 0, 0.15);
20

21
      /* width: 100%;
22
      height: 48px; */
23
      width: 100vw;
24
      height: 12.88vw;
25
    }
26
  </style>
27
  <style>
28

29
  </style>
30
  <script>
31
    // 计算vw单位的值，以750px为基准
32
    // 100vw = 750px
33
    // 测量的ox/750px(基准) = ?VW/100vw
34
    // ?VW = (测量的px/750px(基准)) * 100vw
35
  </script>
36
</head>
37

38
<body>
39
  <p>段落</p>
40
  <div class="tabbar-layout">
41
    <img src="./tabbar.png" alt="标签栏" />
42
  </div>
43
</body>
44

45
</html>

拓展-VScode插件#

在开发中，会计算rem的值，这非常麻烦，这里推荐一个插件px2rem