CSS 尺寸单位概览

本文将探讨 CSS 尺寸单位的四个广泛类别。我们将看看这些尺寸单位的用途是什么，在哪里效果最好，并如何在每种情况下选择最合适的单位，以便我们的布局能够在各种媒体和设备尺寸上得到优化。

概述

• CSS 尺寸单位概述：本文介绍了可用的不同类型的 CSS尺寸单位，并将它们分类为绝对单位、字体相关单位、视口相关单位和容器相关单位。强调了在 CSS 中理解指定值、计算值和使用值之间的区别，这是在网页设计中有效应用这些单位的关键概念。
• 特定单位类型的详细信息：文章深入探讨了每个单位类别的具体情况。绝对单位是固定的，跨媒体一致；字体相关单位根据字体大小和类型而变化；视口相关单位根据浏览器窗口大小调整；容器相关单位由元素容器的尺寸确定。提供了每种单位类型的示例和用例，以说明它们在网页布局中的实际应用。
• 实际应用和最佳实践：文章以选择适当的 CSS单位来应对各种设计场景的指导结束。建议使用绝对单位来表示已知的物理尺寸，字体相关单位用于可伸缩和适应性的排版，视口相关单位用于响应式设计，容器相关单位用于不同布局中的灵活组件。目标是提高网站在不同设备和媒体上的可读性、可用性和可访问性。

关于 CSS 尺寸单位

CSS提供了几种指定元素大小或长度的方法，有些方法比其他方法更直观。CSS 单位分为四个广泛的类别：

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

我们将在本文中看到每种类型的 CSS 单位。在继续之前，让我们复习一下本文中将看到的一些术语：指定值、计算值和使用值。

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

绝对单位

绝对单位与特定的、依赖媒体的测量相关联。对于纸质媒体，绝对 CSS单位与其对应的物理单位相关联。对于有屏幕的媒体，绝对单位与像素相关联。一个像素大约是一英寸的 1/96。绝对单位包括in、cm、mm 和 Q，即英寸、厘米、毫米和四分之一毫米。点（pt）和pica（pc）也是绝对单位。它们源于物理排版和桌面出版。每个pt等于一英寸的 1/72，而1pc等于一英寸的1/6。表1显示了绝对单位及其等效值。

单位	名称	等效值
cm	厘米	1cm ≈ 37.8px
mm	毫米	1mm ≈ 3.78px
Q	四分之一毫米	1Q ≈ 0.944px
in	英寸	1in = 96px
pc	picas	1pc = 16px（1英寸的1/6）
pt	点	1pt ≈ 1.33px（1英寸的1/72）
px	像素	1px = 1/96英寸

当元素的指定宽度为 2in 时，其打印宽度将为两英寸。然而，在屏幕上，2in 的计算值为192px。绝对单位不受字体度量、继承属性值或视口的影响。当你知道输出媒介的物理特性时，它们的效果最佳，就像分页媒体一样。避免使用绝对值与font-size属性。一些视力低下的网络用户会增加浏览器的默认字体大小以提高可读性。绝对值，包括 px，在这种情况下不会随着更改而缩放。相反，请使用字体相对单位。

字体相对单位

字体相对单位使用字体度量来计算元素的尺寸。这可能是字体大小、行高属性的计算值。或者它们可以相对于特定字形的大小进行计算，如 ch、ex 和ic单位。在使用字体相对单位时要小心：如果字体尚未加载，它们可能会触发字体下载。这可能会在网络速度慢或网络间歇性可用性的情况下导致布局转换。字体相关单位可以分为两种类型：本地和根相关。

• 本地字体相对单位根据元素的字体大小属性的计算值来计算尺寸。由于字体大小属性是一个继承属性，这通常意味着它是相对于最近祖先元素的字体大小属性值的。
• 根相对单位相对于文档的根元素计算尺寸 — 通常是 html元素的字体大小值。

em 和 rem

你可能熟悉 em 单位及其根相对应的 rem 单位。em单位表示元素的字体大小属性的计算值的比例。例如，1em 是字体大小值的 100%。小于 1 的值，比如 0.5em，相当于字体大小值的 50% 或一半。大于 1 的值充当乘数。

在前面的示例中，h1 的计算字体大小为 48 像素。其父元素 article 的指定字体大小值为 24px。h1 继承了该值，但是 2em告诉浏览器使 h1 的字体大小是 article的比例的两倍。另一方面，rem 单位相对于根元素的字体大小值来计算尺寸。

在这里，h1的计算字体大小为 32 像素。更改 article 的字体大小值不会改变 h1 的大小，即使它是一个后代元素。em 和rem 大小都是相对于文档的默认字体大小计算的长度。ch、ex和 ic 单位及其根相对单位rch、rex和ic是相对于零、小写 x 和 字形的大小来计算的。

什么是字形？

字形是字符的视觉表示 —— 字体使用的字母、数字或标点符号的形状。一个零字符可以用任意数量的方式表示，如下图所示。各种 0 字符的表示方式字形的尺寸在字体之间可能会有很大差异；根据所选字体的度量，1ch 可能是五个像素或五十个像素。因此，对于 ch、ic 和ex单位及其根相对单位rch、ric和 rex 来说，指定值可能与使用值非常不同。在使用多种字体时请牢记这一点。

零宽度单位 ch 和 rch

ch 和rch单位基于用于呈现它的字体中零字形的高级度量 —— 宽度或高度。当文档的内联轴是水平的时，计算是基于其宽度的。当内联轴是垂直的时，计算是基于零字形的高度的。如果浏览器无法确定 0 字形的度量，那么ch单位会表现得好像 0 字形的宽度为 0.5em，高度为 1em。

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

行高单位：lh 和 rlh

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

当line-height属性的值为normal时，每行的高度基于字体的自身度量标准。当值为数字时，例如line-height: 1.3，行高是字体大小和乘数的乘积，以像素表示。如果line-height 的值为百分比，则line-height的计算值是百分比值乘以计算的字体大小（以像素为单位）。例如，如果用户的最小字体大小为18px，line-height的指定值为 1.5，则计算的行高为27px。这个计算的行高就是一个 lh 或 rlh 单位。内联尺寸为 10lh 的声明会导致一个宽度为 270 像素的元素（如果内联轴是垂直的，则为高度）。根相对行高单位——rlh 单位——使用文档的根元素的使用行高计算长度。局部行高，或 lh 单位，继承祖先元素的 line-height 值。当你的项目使用多种字体和/或语言时，诸如 ex、cap、ic 和 lh 等单位尤其有用。即使用户更改其字体设置，你也可以保持垂直节奏和大小比例。字体相关单位受writing-mode、text-orientation 和 text-transform 等属性的影响。

视口相关单位

如其名称所示，视口相关单位取决于浏览器窗口、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 中较大的那个的一部分。指定为 10vmax 的值，对于测量为 390px x 844px 的视口，转换为 84.4 像素的使用值。大、小和默认视口尺寸是稳定的值。它们只在视口本身发生变化时才会改变，例如从纵向模式旋转到横向模式。如果你使用 svw 或 svi 单位来调整元素的大小，当浏览器界面收回时，元素的大小不会扩展。另一方面，如果你使用lvh 或lvb单位，当它们展开时，浏览器的控件可能会隐藏部分内容。动态视口尺寸，另一方面，是不稳定的。当方向改变或用户滚动时，

它们可能会发生变化。例如，当具有 100dvmax 高度值的元素时，当浏览器界面影响视口大小时，其大小会发生变化。

视口单位可用于创建占据整个屏幕宽度和高度的全宽、全高界面元素，例如占据整个屏幕宽度和高度的幻灯片放映。

视口单位还非常适合创建随着视口大小的变化而扩展或收缩的流体排版。结合 clamp() 函数，以防止字体过小或过大，如下所示。

然而，使用动态视口单位时要小心。用户在滚动时可能会出现布局变化或文本大小变化。

容器相对单位

虽然视口相关单位适用于浏览器窗口的可用空间，但容器相关单位是相对于元素的包含上下文的大小计算的。容器相关单位旨在与容器查询一起使用，目前在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%。容器相关单位可以让你创建在多种上下文中都有效的组件。在下面的示例中，cqi 单位使图像具有相同的比例，无论容器的内联尺寸如何。

<div class="container_wrap">
  <article>
    <img src="https://img1.baidu.com/it/u=4120247998,575942431&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375" alt="Red poppy flowers in a field, against a bright blue sky.">
    <div>
      <h3>Red </h3>
      <p>Red  in a field. Photo byCorina Ardeleanu<from Unsplash</p>
    </div>
  </article>
<div>

<div class="container_vertical" lang="zh">
  <article>
    <img src="https://img1.baidu.com/it/u=4120247998,575942431&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375" alt="Red poppy flowers in a field, against a bright blue sky.">
    <div>
      <h3>红花</h3>
      <p>田野里的红花。 照片由 <a href="https://unsplash.com/@corina">Corina Ardeleanu</a> 拍摄，来自 <a href="https://unsplash.com/photos/sWlxCweDzzs">Unsplash</a>.</p>
    </div>
  </article>
</div>

@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700&family=ZCOOL+KuaiLe&display=swap");

:root {
  font: normal 100% / 1.2 Lora, serif;
  background: #fff;
  color: #000;
}

h3, p {
  margin-block: 0 0.5rem;
}

.container_wrap {
  container-type: inline-size;
}

article {
  display: grid;
  gap: 1rem;
  grid-template-areas:  "img txt";
  grid-template-columns: 33cqi auto;
  margin-block: 0 1rem;
}

article > div {
  grid-area: txt;
}

img {
  aspect-ratio: 600/400;
  grid-area: img;
  height: auto;
  inline-size: 100%;
}

h3 {
  font-size: 4cqi;
}

p {
  font-size: 2cqi;
}

.container_vertical {
  container-type: block-size;
  font-family: 'ZCOOL KuaiLe', sans-serif;
  writing-mode: vertical-lr;
}

.container_vertical h3 {
  font-size: 6cqi;
}

 .container_vertical p {
  font-size: 4cqi;
  line-height: 1.5;
}

结论

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