当前位置：首页 > news >正文

CSS中的em,rem,vm,vh详解

news 来源：原创 2025/7/4 18:58:05

一：`em` 和 `rem` 是两种相对单位，它们常用于 CSS 中来设置尺寸、字体大小、间距等，主要用于更灵活和响应式的布局设计。它们与像素（`px`）不同，不是固定的，而是相对于其他元素的尺寸来计算的。

1. `em` (相对于父元素的字体大小)

- `em` 是一个相对单位，表示相对于 **父元素** 的字体大小来计算。
- 例如，如果一个元素的字体大小为 `2em`，它的实际大小就是其父元素字体大小的两倍。

示例：
css
div {font-size: 16px;  /* 父元素的字体大小是 16px */
}p {font-size: 2em;  /* p 的字体大小是父元素的 2 倍，即 32px */
}

在这个例子中，`div` 的字体大小是 `16px`，而 `p` 的字体大小是 `2em`，即 `32px`（相对于 `div`）。

注意： `em` 会继承父元素的尺寸，意味着如果在嵌套元素中使用，尺寸会累积，导致子元素的尺寸越来越大（或越来越小）。

例子：
css
div {font-size: 16px;
}section {font-size: 2em;  /* 相对于 div，section 的字体大小是 32px */
}article {font-size: 0.5em; /* 相对于 section，article 的字体大小是 16px */
}

在这个例子中：
- `section` 的字体大小是 `32px`（2倍 `div` 的大小），
- `article` 的字体大小是 `16px`（0.5倍 `section` 的大小）。

2. `rem` (相对于根元素的字体大小)

- `rem` 也是相对单位，但它与 `em` 不同，`rem` 是相对于 **根元素（`<html>`）的字体大小** 来计算的。根元素的字体大小通常默认是 16px（可以在 CSS 中更改）。
- `rem` 提供了更稳定的尺寸计算，因为它只依赖于根元素的字体大小，而不受父元素的影响。

 示例：
css
html {font-size: 16px;  /* 根元素字体大小是 16px */
}p {font-size: 2rem;  /* p 的字体大小是根元素字体大小的 2 倍，即 32px */
}

在这个例子中，`p` 的字体大小是根元素字体大小的 2 倍，也就是 `32px`，无论它的父元素的字体大小是多少。

与 `em` 的不同之处：
- `rem` 只依赖于根元素的字体大小，不受父元素影响，避免了 `em` 在嵌套元素中可能带来的累积效果。

3. 总结 `em` 和 `rem` 的区别：

| 单位 | 解释 | 基础参考 | 用途 |
| --- | ---- | -------- | ---- |
| `em` | 相对单位 | 父元素的字体大小 | 适用于需要根据父元素动态调整的场景。
| `rem` | 相对单位 | 根元素（`<html>`）的字体大小 | 适用于确保一致的布局和尺寸，避免父元素影响。

4. `em` 和 `rem` 在响应式设计中的应用：

这两种单位非常适合响应式设计，因为它们可以根据根元素的字体大小或父元素的大小动态调整。你可以通过调整根元素的字体大小，来控制整个页面的尺寸变化。

 示例：
css
html {font-size: 16px;  /* 默认字体大小 */
}@media (max-width: 600px) {html {font-size: 14px;  /* 屏幕宽度小于 600px 时，根元素字体大小变为 14px */}
}

使用 `rem` 和 `em` 时，元素的尺寸会随着根元素或父元素的字体大小变化，适应不同的屏幕尺寸。

---

总结来说：
- `em` 用于相对于父元素的尺寸，适合需要继承父元素大小的场景；
- `rem` 用于相对于根元素的尺寸，适合需要全局一致性的响应式布局。

二：`vm` 和 `vh` 是 CSS 中的视口单位（Viewport Units），用于设置与视口大小相关的元素尺寸。这些单位使得页面设计能够根据用户的浏览器窗口（视口）的大小进行自适应调整。

1. `vh` (Viewport Height)

- `vh` 是视口高度的 1%。
- 视口高度是浏览器窗口的可见区域的高度，不包括浏览器的工具栏、菜单栏等部分。

 示例：
css
div {height: 50vh;  /* 该元素的高度是视口高度的 50% */
}

在这个例子中，`div` 元素的高度会根据浏览器窗口的高度变化。如果浏览器窗口的高度为 800px，那么 `div` 的高度就是 400px。

2. `vw` (Viewport Width)

- `vw` 是视口宽度的 1%。
- 视口宽度是浏览器窗口的可见区域的宽度，不包括任何滚动条或边框。

示例：
css
div {width: 50vw;  /* 该元素的宽度是视口宽度的 50% */
}

在这个例子中，`div` 元素的宽度会根据浏览器窗口的宽度变化。如果浏览器窗口的宽度是 1000px，那么 `div` 的宽度就是 500px。

3. 总结 `vh` 和 `vw` 的使用：

| 单位 | 解释 | 用途 |
| ---- | ---- | ---- |
| `vh` | 相对于视口高度的单位，1vh = 视口高度的 1% | 用于根据视口的高度设置元素的高度或其他尺寸。
| `vw` | 相对于视口宽度的单位，1vw = 视口宽度的 1% | 用于根据视口的宽度设置元素的宽度或其他尺寸。

4. 示例场景：

- 响应式设计：使用 `vh` 和 `vw` 单位可以使元素的大小和布局适应不同设备和屏幕尺寸。
- 全屏背景或元素：如果你希望某个元素（如背景图像）填满整个视口，可以使用 `100vw` 或 `100vh` 来设置其宽度或高度。

 例子：
css
.fullscreen {width: 100vw;  /* 宽度为视口宽度的 100% */height: 100vh; /* 高度为视口高度的 100% */
}

在这个例子中，`.fullscreen` 元素会占据整个浏览器窗口的宽度和高度。

5. `vm`

- 注意：`vm` 不是一个有效的 CSS 单位。如果你看到这个单位，可能是某个拼写错误，或者是特定框架中的自定义单位。标准 CSS 中没有 `vm` 这个单位。

小结：
- `vh` 和 `vw` 是视口相关的单位，分别表示视口的高度和宽度的百分比。
- `vh` 用于调整元素的高度，`vw` 用于调整元素的宽度。