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

一：`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` 用于调整元素的宽度。