CSS 尺寸单位概述

chuckQu

发布于 2023-11-22 17:19:54

2380

发布于 2023-11-22 17:19:54

文章被收录于专栏：前端F2E前端F2E

在本文中，我们将探讨 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 英寸。下表列出了绝对单位及其等价单位。

单位	名称	等价于
cm	厘米	1cm ≈ 37.8px
mm	毫米	1mm ≈ 3.78px
Q	四分之一毫米	1Q ≈ 0.944px
in	英寸	1in = 96px
pc	派卡	1pc = 16px (1/6 of 1 inch)
pt	点	1pt ≈ 1.33px (1/72th of 1 inch)
px	像素	1px = 1/96th of 1 inch

当指定元素的宽度为 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 和水字形的大小计算的。

什么是字形？

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

image.png

不同字体的字形尺寸可能会有很大差异；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 字形从基线测量的高度。

image.png

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

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

image.png

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

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

image.png

当浏览器无法从字体中确定大写高度时，就会使用字体的升角值。升角是小写字母（如 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 默认视口」，可能等于大视口或小视口，或一个中间尺寸
「大视口」，或浏览器界面可缩回部分缩回时的可用尺寸
「小视口」，假定浏览器界面的可缩回部分已展开
「动态视口」，无论浏览器界面是否展开或缩回，动态视口都会存在，并根据可用空间的大小而增大或缩小

image.png

例如，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[1]中定义的，而不是在CSS Values and Units Module Level 4[2]规范中。

容器相对单位也称为容器查询长度单位。根据单位的不同，每个单位等于容器横轴或纵轴尺寸的 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%。