尺码单位

bookmark_border 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

CSS 播客 - 第 008 集：尺寸单位

Web 是一种自适应媒体，但有时您可能需要控制其尺寸，以提高界面的整体质量。一个很好的例子是限制行长度以提高可读性。 如何在像网络这样灵活的媒介中实现这一点？

对于这种情况，您可以使用 ch 单位，该单位等于渲染字体中“0”字符在其计算大小时的宽度。借助此单位，您可以使用专门用于设置文本大小的单位来限制文本宽度，从而无论文本大小如何，都能实现可预测的控制。ch 单位是少数几个对此示例等特定情境有用的单位之一。

Numbers

数字用于定义 opacity、line-height，甚至 rgb 中的颜色通道值。数字是无单位的整数（1、2、3、100）和小数（.1、.2、.3）。

数字的含义取决于其上下文。例如，在定义 line-height 时，如果您在定义数字时未提供支持的单位，则该数字代表一个比率：

p {
  font-size: 24px;
  line-height: 1.5;
}

在此示例中，1.5 等于 p 元素的计算像素字号的 150%。这意味着，如果 p 的 font-size 为 24px，则行高将计算为 36px。

数字还可用于以下位置：

• 设置过滤条件值时：filter: sepia(0.5) 会对元素应用 50% 色调过滤器。
• 设置不透明度时：opacity: 0.5 会应用 50% 不透明度。
• 在颜色通道中：rgb(50, 50, 50)，其中值 0-255 可用于设置颜色值。查看颜色课程。
• 如需转换元素，请使用 transform: scale(1.2) 将元素放大到其初始大小的 120%。

百分比

在 CSS 中使用百分比时，您需要了解百分比的计算方式。例如，width 的计算方式为父元素可用宽度的百分比。

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%;
}

在前面的示例中，假设布局使用默认的 box-sizing: content-box，则 div p 的宽度为 150px。

如果您将 margin 或 padding 设置为百分比，则无论方向如何，它们都将是父元素宽度的一部分。

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

在前面的示例中，margin-top 和 padding-left 都会计算为 150px。

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

如果您将 transform 值设置为百分比，则系统会根据设置了转换的元素来计算。在此示例中，p 的 translateX 值为 10%，width 为 50%。首先，计算宽度：150px，因为它是父元素宽度的 50%。然后，获取 150px 的 10%，即 15px。

尺寸和长度

如果您为数字附加单位，则该数字会变成维度。 例如，1rem 是一个维度。在本上下文中，与数字关联的单位在规范中称为维度令牌。长度是指代距离的维度，可以是绝对值，也可以是相对值。

绝对长度

所有绝对长度均基于同一基准进行解析，因此无论在 CSS 中的何处使用，其结果都是可预测的。例如，如果您使用 cm 调整元素的大小，然后进行打印，那么与尺子相比，打印的元素应该是准确的。请注意，由于像素尺寸的差异，物理单位（例如 cm 和 in）无法在屏幕上以这些尺寸可靠地显示。实体单位最适合用于印刷样式表，因为在这种情况下，实体单位更可靠。

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

如果您打印此页面，div 将以 10x5 厘米的黑色矩形的形式打印出来。 请注意，CSS 不仅适用于数字内容，还适用于印刷内容的样式设置。 在设计印刷内容时，绝对长度非常有用。

相对长度

相对长度是根据基准值计算得出的，与百分比非常相似。与百分比相比，这两种方式的区别在于，您可以根据相关的基准大小（例如默认字体大小或窗口尺寸）来定义大小。这意味着，CSS 具有 ch 等以字体大小指标为依据的单位，以及基于视口（浏览器窗口）宽度的 vw。由于其自适应特性，相对长度在 Web 上尤为有用。

与字号相关的单位

CSS 提供了一些实用的单位，这些单位与渲染排版元素的大小相关，例如文本本身的大小（em 单位）或字体字符的宽度（ch 单位）。

与视口相关的单位

您可以使用视口（浏览器窗口）的尺寸作为相对基准。这些单元会划分可用的视口空间。

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

在此示例中，div 将是视口宽度的 10%，因为 1vw 是视口宽度的 1%。p 元素的 max-width 为 60ch，这意味着它在计算出的字体和大小下不得超过 60 个“0”字符的宽度。

其他视口相对单位

只要视口大小保持不变，视口相对单位的值就会保持不变。不过，移动浏览器通常会显示或隐藏界面元素，以便在小屏幕上尽可能显示最多的内容，而不会更改计算出的视口大小。您可以使用与视口相关的单位的替代方案来考虑可见区域的这些变化。

与容器相关的单位

您可以使用元素容器的尺寸作为相对基准。这些单元会划分可用的容器空间。这些方法在容器查询中非常有用，可根据可用空间设置字体大小。

其他单位

还有一些其他单位，用于处理特定类型的值。

角度单位

在颜色模块中，我们介绍了角度单位，这些单位有助于定义角度值，例如 hsl 中的色相。它们还适用于在转换函数中旋转元素。

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

使用 deg 角度单位，您可以沿 div 的中心轴将其旋转 90°。

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

分辨率单位

在前面的示例中，min-resolution 的值为 192dpi。dpi 单位表示每英寸的点数。一个有用的上下文是检测分辨率非常高的屏幕（例如媒体查询中的 Retina 显示屏），并提供分辨率更高的图片。

检查您的理解情况

测试您对尺寸的了解

资源

• CSS 规范值和单位级别 4
• MDN 上的尺寸和单位
• Ems 简介
• 百分比说明