最常用的 CSS 计量单位解释

当你浏览 CSS 并开始看到不同的度量单位时，了解它们的确切用途会很有帮助。为了帮助你更好地理解 CSS 度量单位的工作原理，以下是一些最常用度量单位的解释和示例。

像素

像素 (px) 是最常用的测量单位，因为网页设计中有很多标准都是基于像素的。为了方便理解，1 px 对应屏幕上的一个像素。它非常小，但使用这个参考值的目的是为了准确了解元素或文本将填充多少物理空间。

使用像素时，请记住这些单位会根据屏幕尺寸而变化。12px 的显示效果会因手机和笔记本电脑的不同而略有不同。像素是网站的基本测量单位。所有主流浏览器都将网页的默认根大小设置为 16px。

div {
    height: 32px;
}

百分比在响应式设计中非常常用，而且非常直观。需要记住的是，其大小是相对于父元素的。如果您将 <h2> 嵌套在 <div> 中，并使用 % 作为度量单位设置其宽度，则 <h2> 的宽度将相对于 <div> 的大小。它看起来就像这样：

div {
    width: 1250px;
}

h2 {
    width: 35%;
}

现在您知道 <h2> 的宽度将是 <div> 宽度的 35%。百分比比 em 和 rem 单位更简单，但百分比通常不用于 font-size 或 border 等属性，因此它的用途比较有限。

这与元素的 font-size 值相关。假设你在 <div> 中有一个 <p> 元素，并且你拥有以下样式：

div {
    font-size: 3em;
}

p {
    width: 2em;
}

<div> 的字体大小将是 <body> 字体大小的 3 倍。因此，它的默认值为 48px。这个数字来自于浏览器的默认字体大小，也就是我们之前讨论过的 16px。由于 <div> 的字体大小是 16px 的 3 倍，所以最终的字体大小是 48px。

这意味着你的 <p> 的宽度将是 <div> 字体大小的两倍。所以你的 <p> 的宽度将是 96px。
这就是 em 度量单位的工作原理。记住，包含元素的字体大小值决定了使用 em 的子元素的大小。

这个度量单位与 em 非常相似，只是更容易理解。rem 的度量单位基于根元素的字体大小。除非你更改 <body> 的字体大小，否则这个基准大小将为 16px。

这意味着所有带有 rem 单位的元素都只是 16px 的倍数。例如，假设你的页面上有一个侧边栏和一个主容器。你的 CSS 代码如下：

.sidebar {
    width: 2.4rem;
}

.main-container {
    width: 7.2rem;
}

由于使用了 rem，您应该能够轻松计算元素的大小。这比 em 有很大优势，因为您不必为每个元素都设置字体大小，而且在不同设备上浏览页面时，字体大小仍然会略有缩放。

我希望这个简短的解释能帮助您更好地理解常见的 CSS 测量单位！

这些只是最常用的 CSS 度量单位，并非全部。至少还有 11 个其他单位。其中一些单位的问题在于其浏览器支持有限。

另外两个越来越流行的测量单位是视口测量。视口高度和视口宽度（vh 和 vw）使得创建响应式布局更加容易，因为它们都与屏幕尺寸相关。不过，这个留到以后再讨论吧。

嘿！你应该在 Twitter 上关注我，理由如下：https://twitter.com/FlippedCoding