基本使用#

1
.box {
2
  width: 300px;
3
  height: 200px;
4
  font-size: 16px;
5
  padding: 20px;
6
  border: 1px solid black;
7
}

特点：

• 数值明确，容易控制元素尺寸。
• 不依赖父元素的宽度或字体大小。
• 适合边框、图标、固定尺寸元素、细节间距等。

px 不等于物理像素#

CSS 中的 1px 不一定对应屏幕上的一个物理像素。例如，在设备像素比（DPR）为 2 的情况下，正常缩放时：1 CSS px 通常对应 2 × 2 个物理像素。因此，px 不是永远固定的物理尺寸。

开发场景#

1
.card {
2
  width: 320px;
3
  padding: 16px;
4
  border-radius: 8px;
5
  border: 1px solid #ddd;
6
}

px 适合需要精确控制尺寸的场景，但大量使用固定宽高可能导致小屏幕溢出，因此响应式开发通常需要搭配其他单位。

基本使用#

1
<div class="parent">
2
  <div class="child"></div>
3
</div>
4
.parent {
5
  width: 500px;
6
  height: 300px;
7
}
8

9
.child {
10
  width: 50%;
11
  height: 50%;
12
}

计算结果：

• 子元素宽度：500 × 50% = 250px
• 子元素高度：300 × 50% = 150px

不同属性的百分比参照对象#

注意，padding-top: 10% 通常也是根据包含块的宽度计算，而不是高度。

开发场景#

1
.container {
2
  width: 80%;
3
  max-width: 1200px;
4
  margin: 0 auto;
5
}

适合：

• 流式布局。
• 容器宽度自适应。
• 子元素占据父容器一定比例。

基本规则#

• 用在 font-size 上：相对于父元素计算后的字体大小。
• 用在其他长度属性上：相对于当前元素计算后的字体大小。

基本使用#

1
.parent {
2
  font-size: 20px;
3
}
4

5
.child {
6
  font-size: 1.5em;
7
  padding: 2em;
8
}

计算过程：

• .child 字体大小：20 × 1.5 = 30px
• .child 内边距：30 × 2 = 60px

虽然都使用 em，但因为属性不同，计算参照对象也不同。

em的嵌套问题#

1
<div class="box">
2
  第一层
3
  <div class="box">
4
    第二层
5
    <div class="box">第三层</div>
6
  </div>
7
</div>
8
body {
9
  font-size: 16px;
10
}
11

12
.box {
13
  font-size: 1.5em;
14
}

嵌套计算结果：

这就是 em 容易出现字体逐层放大的原因。

开发场景#

em 适合希望元素的间距、尺寸跟随自身字体大小变化的组件。

1
.button {
2
  font-size: 16px;
3
  padding: 0.5em 1em;
4
  border-radius: 0.5em;
5
}

当按钮字体大小变化时，内边距和圆角也会按比例变化。

基本使用#

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

5
.box {
6
  width: 20rem;
7
  height: 10rem;
8
  font-size: 1.5rem;
9
}

计算结果：

• 20rem = 320px
• 10rem = 160px
• 1.5rem = 24px

rem 与 em 的区别#

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

5
.parent {
6
  font-size: 20px;
7
}
8

9
.child {
10
  font-size: 2em;
11
  padding: 2rem;
12
}

• 2em = 40px，相对于父元素字体大小计算。
• 2rem = 32px，相对于根元素字体大小计算。

rem 不会像 em 那样因为普通父元素的字体设置而不断累积放大。

rem 的响应式应用#

通过修改根元素的字体大小，可以统一调整使用 rem 的尺寸。

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

5
.card {
6
  width: 20rem;
7
  padding: 1.5rem;
8
}
9

10
@media (max-width: 600px) {
11
  html {
12
    font-size: 14px;
13
  }
14
}

注意：这种做法仅改变使用 rem 的尺寸，不代表页面自动完成响应式布局。另外，修改根字号也会影响使用 rem 的文字大小，需要考虑可读性。

开发场景#

适合：

• 全局字体大小。
• 组件内外边距。
• 统一间距系统。
• 需要跟随根字体大小调整的元素尺寸。

vw（视口宽度）#

1
1vw = 视口宽度的 1%

假设视口宽度为 1000px：

• 1vw = 10px
• 50vw = 500px
• 100vw = 1000px

1
.box {
2
  width: 50vw;
3
}

无论父元素宽度多少，元素的指定宽度始终根据视口宽度计算。

vh（视口高度）#

1
1vh = 视口高度的 1%

假设视口高度为 800px：

• 1vh = 8px
• 50vh = 400px
• 100vh = 800px

1
.hero {
2
  height: 100vh;
3
}

适合首页首屏、全屏背景等场景。

注意：移动端浏览器工具栏会影响可见区域，现代开发中需要真正贴合动态可见高度时，可以考虑 100dvh。

vmax（视口较大边）#

1
1vmax = max(视口宽度, 视口高度) × 1%

vmin（视口较小边）#

1
1vmin = min(视口宽度, 视口高度) × 1%

例如，视口为 1200 × 800px 时：

开发场景#

1
/* 全屏首屏 */
2
.hero {
3
  min-height: 100dvh;
4
}
5

6
/* 根据视口宽度调整标题大小 */
7
.title {
8
  font-size: clamp(24px, 4vw, 48px);
9
}
10

11
/* 始终保持正方形 */
12
.square {
13
  width: 30vmin;
14
  height: 30vmin;
15
}
16

17
/* 根据视口较大边创建背景圆形 */
18
.circle {
19
  width: 50vmax;
20
  height: 50vmax;
21
  border-radius: 50%;
22
}

其中 vmin 很适合需要同时考虑横屏和竖屏的场景。