CSS 播客 - 第 008 集：尺寸单位
网络是一种自适应媒介 但有时您需要控制其尺寸以提高整体界面质量。 限制行长度以提高可读性就是一个很好的例子。 如何在像网络这样的灵活媒介中实现这一点？
对于这种情况，您可以使用 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 调整元素的大小，然后进行打印，那么与尺子相比，打印的元素应该是准确的。
div {
width: 10cm;
height: 5cm;
background: black;
}
如果您打印此页面，div 将以 10x5 厘米的黑色矩形的形式打印出来。
请注意，CSS 不仅适用于数字内容，还适用于印刷内容的样式设置。
在设计印刷内容时，绝对长度非常有用。
| 单位 | 名称 | 等同于 |
|---|---|---|
| 厘米 | 厘米 | 1 厘米 = 96 像素/2.54 |
| 毫米 | 毫米 | 1 毫米 = 1 厘米的 1/10 |
| 问题 | 四分之一毫米 | 1Q = 1/40 厘米 |
| in | 英寸 | 1 英寸 = 2.54 厘米 = 96 像素 |
| PC | 毕加斯 | 1pc = 1/6 英寸 |
| pt | 得分 | 1pt = 1/72 英寸 |
| 像素 | 像素 | 1px = 1/96 英寸 |
相对长度
相对长度是根据基准值计算的，与百分比非常相似。
与百分比相比，这两种方式的不同之处在于，您可以根据上下文调整元素的大小。也就是说，CSS 中的一些单位（例如 ch）是以文字大小为基础，
以及 vw，它基于视口（您的浏览器窗口）的宽度。
相对长度因其响应性而特别适合在网页上使用。
与字号相关的单位
CSS 提供了一些实用的单位，这些单位与渲染排版元素的大小相关，例如文本本身的大小（em 单位）或字体字符的宽度（ch 单位）。
| 单位 | 相对于： |
|---|---|
| em | 相对于字体大小 即，1.5em 将比其父项的计算基准字体大小大 50%。 （过去使用大写字母“M”的高度）。 |
| ex | 用于确定在元素的当前计算字号中使用 x-height、字母“x”还是 `.5em` 的启发词语。 |
| cap | 元素当前计算的字体大小中的大写字母的高度。 |
| ch | 平均提前输入字符 元素字体中较窄字形的 （以“0”字形表示）。 |
| ic | 元素字体中全角字形的平均字符间距，以“水”(CJK 水意符号，U+6C34) 字形表示。 |
| rem | 根元素的字体大小（默认为 16px）。 |
| lh | 元素的行高。 |
| rlh | 根元素的行高。 |
视口相对单位
可以使用视口（浏览器窗口）的尺寸作为相对基础。 这些单位会占用可用的视口空间。
| 单位 | 相对于 |
|---|---|
| vw | 视口宽度的 1%。用户可以使用此单位来执行一些很酷的字体技巧，例如根据网页的宽度调整标题字体的大小，以便在用户调整大小时，字体也会随之调整。 |
| vh | 视口高度的 1%。 例如，如果您有页脚工具栏，则可以使用此方法来排列界面中的项。 |
| vi | 根元素的内嵌轴上视口大小的 1%。 轴是指写入模式。 在英语等水平书写模式下，内嵌轴是水平的。 在垂直书写模式（例如某些日语排版字体）下，内嵌轴是从上到下运行的。 |
| vb | 根元素的块轴中视口大小的 1%。 对于块轴，这将是语言的方向。 英语等 LTR 语言具有垂直的版块轴，因为英语读者会从上到下解析页面。 垂直书写模式具有水平块轴。 |
| vmin | 视口较小尺寸的 1%。 |
| vmax | 视口较大尺寸的 1%。 |
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 显示在媒体查询中，并提供分辨率更高的图片。
检查您的理解情况
测试您对尺码知识的掌握情况
以下哪些是有效的维度？
绝对单位和相对单位有何不同？
视口单元是绝对值。