返回

初探 CSS 单位的奥秘：px、em、rem、vw 和 vh 的区别

前端

在 CSS 的世界中，单位是定义元素尺寸和位置的关键因素。从绝对单位 px 到相对单位 em 和 rem，再到视口相关的单位 vw 和 vh，了解这些单位之间的差异对于编写高效且可扩展的代码至关重要。

px：像素，绝对单位之王

像素 (px) 是 CSS 中最基本的单位，表示屏幕上一个物理像素的大小。它是一个绝对单位，这意味着它始终保持恒定的尺寸，无论设备或分辨率如何。px 用于定义元素的固定大小，例如按钮的高度或图像的宽度。

em：与父元素的字体大小相关

em 是一个相对单位，它表示相对于其父元素字体大小的长度。例如，如果父元素的字体大小为 16px，那么 1em 等于 16px。这使得 em 非常适合定义相对于父元素大小的文本或元素尺寸。

rem：与根元素的字体大小相关

rem 是 em 的一个变体，它相对于根元素（即 <html> 元素）的字体大小。这意味着 rem 与页面上的所有其他元素保持一致，即使嵌套在具有不同字体大小的父元素中。rem 非常适合定义页面布局的全局尺寸，例如页边距和页脚大小。

vw：视口宽度的百分比

vw 是一个视口单位，表示视口宽度的百分比。它根据设备或浏览器的视口宽度动态调整。例如，如果视口宽度为 1000px，那么 1vw 等于 10px。vw 非常适合定义基于视口的元素尺寸，例如侧边栏宽度或全宽背景。

vh：视口高度的百分比

vh 也是一个视口单位，但它表示视口高度的百分比。与 vw 类似，vh 会根据设备或浏览器的视口高度动态调整。1vh 等于视口高度的 1%。vh 非常适合定义基于视口的垂直元素尺寸，例如页眉高度或弹出窗口大小。

何时使用哪个单位

选择正确的 CSS 单位对于创建可扩展且响应式的网站至关重要。以下是一些使用准则：

  • 使用 px 定义固定尺寸的元素： 例如，按钮高度、图标大小。
  • 使用 em 定义相对于父元素的元素尺寸： 例如，文本大小、边距。
  • 使用 rem 定义相对于根元素的全局尺寸： 例如，页边距、页脚大小。
  • 使用 vw 定义基于视口的元素尺寸： 例如，侧边栏宽度、全宽背景。
  • 使用 vh 定义基于视口的垂直元素尺寸： 例如，页眉高度、弹出窗口大小。

实际示例

为了说明这些单位之间的差异，让我们考虑一个包含以下 CSS 规则的示例：

.button {
  width: 100px;
  height: 40px;
}

.text {
  font-size: 1.2em;
  margin: 1em;
}

在此示例中，.button 元素使用 px 定义固定大小（100px 宽，40px 高）。.text 元素使用 em 相对于其父元素定义文本大小（1.2 倍于父元素的字体大小）和边距（1 倍于父元素的字体大小）。

结论

理解 CSS 单位的差异对于创建可扩展且响应式的网站至关重要。通过选择正确的单位，开发人员可以确保元素尺寸在各种设备和分辨率上都能保持一致和可预测。通过明智地使用 px、em、rem、vw 和 vh，您可以编写出高效、优雅且始终如一的代码。