尺寸单位

bookmark_border 通过合集保持井井有条 根据您的偏好保存内容并进行分类。

CSS 播客 - 008：尺寸单位

Web 是一种响应式媒介，但有时您希望控制其尺寸以提高整体界面质量。这方面的一个很好的例子是限制行长以提高可读性。在像 Web 这样灵活的媒介中，您将如何做到这一点？

对于这种情况，您可以使用 ch 单位，它等于渲染字体中“0”字符在其计算大小下的宽度。此单位允许您使用专为调整文本大小而设计的单位来限制文本的宽度，从而无论文本大小如何，都可以实现可预测的控制。ch 单位是少数几种在特定上下文（如本例）中非常有用的单位之一。

数字

数字用于定义 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%; 
}

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

如果您将 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 值设置为百分比，则它基于设置了 transform 的元素。在此示例中，p 的 translateX 值为 10%，width 为 50%。首先，计算宽度将是多少：150px，因为它是其父元素宽度的 50%。然后，取 150px 的 10%，即 15px。

尺寸和长度

如果您将单位附加到数字，它将变成尺寸。例如，1rem 是一个尺寸。在这种情况下，附加到数字的单位在规范中称为尺寸标记。长度是指距离的尺寸，它们可以是绝对长度或相对长度。

绝对长度

所有绝对长度都相对于相同的基准解析，这使得它们在 CSS 中的任何位置使用都具有可预测性。例如，如果您使用 cm 来调整元素的大小，然后在打印时，如果将其与标尺进行比较，它应该是准确的。

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

如果您打印此页面，div 将打印为 10x5 厘米的黑色矩形。请记住，CSS 不仅用于数字内容，还用于设置打印内容的样式。在为打印设计时，绝对长度确实可以派上用场。

相对长度

相对长度是根据基本值计算的，很像百分比。这些长度与百分比之间的区别在于您可以根据上下文调整元素的大小。这意味着 CSS 具有诸如 ch 之类的单位，这些单位使用文本大小作为基础，以及 vw，它基于视口（浏览器窗口）的宽度。由于 Web 的响应式特性，相对长度在 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 的所有信息
• 百分比说明