CSS 尺寸单位概述

在本文中，我们将探讨 CSS 尺寸单位的四大类别。我们将了解这些尺寸单位的用途、它们的最佳工作原理，以及如何在每种情况下选择最佳尺寸单位，从而在各种媒体和设备尺寸下优化我们的布局。

关于 CSS 尺寸单位

CSS 提供了多种指定元素大小或长度的方式，其中一些更为直观。CSS 单位可分为四大类：

• 绝对单位，比如cm和px
• 字体相对单位，比如em和ch
• 视口相对单位，比如vw和vmin
• 容器相对单位，比如cqw和cqh

我们将在本文中介绍每种 CSS 单位。

在继续之前，先明确下后面频繁提到的有关概念：指定值、计算值和使用值。

• 指定值是文档样式表中显示的 CSS 属性的值。
• 计算值是浏览器应用级联规则、继承规则和属性定义后的属性值。
• 使用值是浏览器进行最终调整和转换后的属性值。在此过程中，相对单位会转换为绝对单位。对于有屏幕的媒体（即有屏幕的设备），物理单位会转换为等效的像素单位。

绝对单位

绝对单位是特定的、与介质相关的测量值。对于纸张等物理介质，绝对 CSS 单位与相应的物理单位挂钩。对于屏幕来说，绝对单位为像素。一个像素大约是 1/96英寸。

绝对单位包括 in、cm、mm 和 Q，分别表示英寸、厘米、毫米和四分之一毫米。点（pt）和派卡（pc）也是绝对单位。它们起源于物理排版和桌面出版。每 pt 等于 1/72 英寸，而 1pc 等于 1/6 英寸。下表列出了绝对单位及其等价单位。

当指定元素的宽度为 2in 时，其打印宽度将为 2 英寸。但在屏幕上，2in 的计算值为 192px。

绝对单位不受字体规格、继承属性值或视口的影响。在了解输出介质的物理特性时，使用绝对单位效果最佳。

避免在font-size属性中使用绝对值。一些低视力用户会增加浏览器的默认字体大小，以提高可读性。包括 px 在内的绝对值不会随着这种变化而缩放。因此，应使用字体相对单位。我们将在下一节讨论它们。

字体相对单位

字体相对单位使用字体规格来计算元素的尺寸。这可能是font-size或line-height属性的计算值。或者是相对于特定字形的尺寸进行计算，如 ch、ex 和 ic 单位。

使用字体相对单位时要注意：如果字体尚未加载，它们可能会触发字体下载。这可能会在速度较慢的网络或可用性不稳定的网络上造成布局偏移。

字体相对单位可分为两类：局部相对单位和根相对单位。

• 局部字体相对单位是相对于元素的font-size属性的计算值来计算大小的。由于font-size属性是一个继承属性，这通常意味着它是相对于最近的祖先元素的font-size属性值而言的。
• 根相对单位计算的是相对于文档根元素的大小，通常是 html 元素的font-size值。

em和rem

你可能对 em 单位以及 rem 单位并不陌生。em 单位表示元素font-size属性计算值的一个比例。例如，1em 是font-size值的 100%。小于 1 的值，如 0.5em，则为 50% 或 font-size 值的一半。大于 1 的值是一个乘数。

而 rem 单位则是根据根元素的font-size值计算大小。

em 和 rem 大小都是相对于文档默认字体大小计算的长度。ch、ex 和 ic 单位及其相对于根字体的 rch、rex 和 ric 分别是相对于零、小写 x 和水字形的大小计算的。

什么是字形？

字形是字符的可视化表示--字面意思是字体使用的字母、数字或标点符号的形状。一个零字符可以用多种方式表示，如下图所示。

不同字体的字形尺寸可能会有很大差异；1ch 可能是 5 像素，也可能是 50 像素，这取决于所选字体的度量标准。因此，指定值可能与 ch、ic 和 ex 单位及其根相对的 rch、ric 和 rex 的使用值大不相同。在使用多种字体时，请记住这一点。

零宽单位： ch 和 rch

ch 和 rch 单位基于用于渲染的字体中零字形的宽度或高度进行度量。当文档的内联轴为水平轴时，计算基于其宽度。如果内联轴是垂直的，则根据零字形的高度进行计算。如果浏览器无法确定 0 字形的大小，ch 单位就会表现 0 字形为0.5em宽以及1em高。

与 rem 单位类似，rch 单位使用的是根元素字体零字形的宽高进行度量。

X 高度和大写高度单位：ex/rex 和 cap/rcap

在字体设计中，x-height是指小写字母 x 字形从基线测量的高度。

使用 ex 单位设置的尺寸是相对于第一个可用字体的已用 x 高度计算的。rex 单位的作用与此类似，但它是相对于根元素的 ex 单位而不是最近的祖先来计算大小的。

另一方面，大写高度是指从基线到大写字母顶部的距离，通常是指顶部平坦字母的高度。在某些字体中，尖顶或圆形大写字母（如 A、O 和 S）的顶端高度可能会稍高一些。

大写高度单位（cap）是相对于元素第一个可用字体的已用大写高度来计算的。根相对 rcap 单位使用根元素的cap值作为计算长度的基础。遗憾的是，目前只有 Firefox 支持cap单位，而任何浏览器都不支持 rcap 单位。

有些字体在向浏览器公开字体指标方面做得很差，或者缺乏可靠的指标。其他字体可能缺少小写 x 字形，或使用阿拉伯语等非拉丁字体。当无法从字体本身确定 x 高度时，浏览器会使用 0.5em 的备选 x 高度。

当浏览器无法从字体中确定大写高度时，就会使用字体的升角值。升角是小写字母（如 h 或 b）中超出 x 高度的部分。

表意单位：ic和ric

ic 单单位最适用于中文、日文和韩文字符集。它根据所使用字体的"水 "或"水形表意文字"来计算长度。这三种字符集都使用水形表意文字。

中文、日文和韩文字体中的字形通常具有相同的宽度和高度。因此，对于这些字符集，ic 单位可以很好地将文本限制为每行特定的字形数。

尽管"水"是中文、日文和韩文中的共同表意文字，但并非每种字体都有代表它的字形。当浏览器无法确定"水"的测量值时，就会假定测量值为 1em。

与其他字体相对单位一样，ic 单位是相对于父元素的计算值计算的，而 ric 单位是相对于根元素的计算值计算的。

行高单位：lh和rlh

你还可以使用行高相对单位 lh 及其根相对单位 rlh 来设置长度。lh 单位等于使用该单位元素的line-height属性的计算值。它是相对于元素的直接祖先计算的。rlh 单位计算的是相对于文档根元素line-height的长度。

当 line-height 属性的值为 normal 时，每行的高度基于字体自身的度量。如果值是一个数字（如 line-height：1.3），行高就是font-size与乘数的乘积，以像素为单位。如果值是一个百分比，那么line-height的计算值就是百分比值乘以计算出的字体大小（以像素为单位）。

例如，如果用户的最小字体大小为 18px，指定的line-height为 1.5，则计算出的行高为 27px。计算出的行高是一个 lh 或 rlh 单位。如果声明 inline-size: 10lh，则元素宽度为 270 像素（如果内联轴是垂直的，则元素高度为 270 像素）。

根相对行高单位 rlh 单位使用文档根元素的已用行高计算长度。本地行高或 lh 单位继承了祖先元素的行高值。

当项目使用多种字体和/或语言时，ex、cap、ic 和 lh 等单位尤其有用。即使用户更改了字体设置，也能保持垂直和大小比例。

到目前为止，我们已经介绍了绝对长度和字体相对单位。不过，CSS 还支持另外两种尺寸单位：视口相对单位和容器相对单位。

视口相对单位

视口相对单位，顾名思义，取决于浏览器窗口的尺寸、iframe 或设备尺寸。它们是相对于初始包含块的大小计算的，如果是分页媒体，则是视口或页面。一个视口百分比单位等于初始包含块的 1%。这与百分比不同，百分比将尺寸设置为父元素宽度或高度的一定比例。

视口百分比单位有点难以理解，部分原因是它们基于视口的四个概念：

• UA 默认视口，可能等于大视口或小视口，或一个中间尺寸
• 大视口，或浏览器界面可缩回部分缩回时的可用尺寸
• 小视口，假定浏览器界面的可缩回部分已展开
• 动态视口，无论浏览器界面是否展开或缩回，动态视口都会存在，并根据可用空间的大小而增大或缩小

例如，iOS 上的 Safari 浏览器会在你从页面顶部向下滚动时隐藏后退按钮、标签菜单和其他控件，而在向上滚动时又会重新显示它们。

每个概念视口都有一组相应的视口单位。UA 默认视口单位包括 vw、vh、vmin 和 vmax。大视口、小视口和动态视口单位遵循类似的命名规则，前缀为 l、s 或 d，即 lvw 或 dvmin。

*vw 和 *vh 单位分别等于初始包含块宽度和高度的 1%。*vi 和 *vb 单位的作用类似。每个 *vi 单位等于初始包含块沿内联轴的 1%，而每个 *vb 单位等于初始包含块沿块轴的 1%。内联轴和块轴取决于writing-mode属性的值。当文档使用垂直书写模式时，内联轴为垂直轴，块轴为水平轴。对于水平书写模式，内联轴是水平的，块轴是垂直的。

在 *vmin 单位的情况下，长度按 *vw 或 *vh 中较小者的比例计算。如果 UA 默认视口为 390px x 844px，那么指定的 10vmin 值就会变成 39 像素的使用值（或 390 的 10%）。

同样，*vmax 单位也是按照 *vw 或 *vh 中较大者的比例计算的。对于 390px x 844px 的视口，10vmax 的指定值将转化为 84.4 像素的使用值。

大、小和默认视口尺寸都是稳定值。只有当视口本身发生变化时，例如从纵向模式旋转到横向模式时，它们才会发生变化。如果使用 svw 或 svi 单位来确定元素的大小，那么当浏览器界面缩回时，元素的大小不会扩大。反之，如果使用 lvh 或 lvb 单位，部分内容可能会在浏览器控件展开时被隐藏。

另一方面，动态视口尺寸并不稳定。当方向改变或用户滚动时，它们可能会改变。例如，当浏览器界面影响视口大小时，高度值为 100dvmax 的元素就会改变大小。

容器相对单位

视口相对单位适用于浏览器窗口的可用空间，而容器相对单位则是相对于元素的包含上下文的大小来计算的。容器相对单位目前是在 CSS Containment Module Level 3中定义的，而不是在CSS Values and Units Module Level 4规范中。

容器相对单位也称为容器查询长度单位。根据单位的不同，每个单位等于容器横轴或纵轴尺寸的 1%。例如，cqw 和 cqh 单位分别等于容器宽度和高度的 1%。

要在布局中支持多种语言和脚本，请使用 cqi 和 cqb 单位。cqi 单位等于容器内嵌大小的 1%，而 cqb 单位等于块大小的 1%。与 vi 和 vb 单位一样，cqi 和 cqb 也受writing-mode属性的影响。

最后是 cqmin 和 cqmax 单位。cqmin 单位与 vmin 类似，都是根据 cqi 或 cqb 中较小的一个进行评估。而 cqmax 单位则是根据 cqi 或 cqb 中的较大值来计算的。每个 cqmin 单位代表较小维度的 1%。每个 cqmax 单位代表较大维度的 1%。

总结

了解尺寸单位是创建能在各种媒体和设备尺寸下正常工作的 CSS 布局的关键。选择正确的单位可以提高网站的可读性、可用性和可访问性。当你知道输出媒介的物理尺寸时，请使用绝对单位。字体相对单位和视口相对单位非常适合创建适应多种屏幕尺寸的布局。容器相对单位非常适合创建可重复使用的组件，以适应各种布局。

以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~