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` 用于調整元素的寬度。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/73969.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/73969.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/73969.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！