尺码单位

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 厘米的 1/40
in 英寸 1 英寸 = 2.54 厘米 = 96 像素
PC 毕加斯 1pc = 1/6 英寸
分 得分 1pt = 1 英寸的 1/72
像素 像素 1px = 1/96 英寸

相对长度

相对长度是根据基准值计算的，与百分比非常相似。 这些百分比和百分比的区别在于，您可以根据上下文调整元素的大小。 这意味着，CSS 中的一些单位（例如 ch）以文字大小为基础， 以及 vw，它基于视口（您的浏览器窗口）的宽度。 相对长度因其自适应特性而在网页上特别有用。

字体大小相对单位

CSS 提供了有用的单位，单位与所呈现排版的元素大小相关， 例如文字本身的大小（em 个单位）或字体字符的宽度（ch 个单位）。

单位 相对于：
em 相对于字体大小 即，1.5em 将比其父项的计算基准字体大小大 50%。 （过去使用大写字母“M”的高度）。
例如 启发式方法，确定是否使用 x 高度， 字母“x”或“.5em”，表示当前计算出的元素字体大小。
上限 元素当前计算的字体大小中的大写字母的高度。
ch 平均提前输入字符 元素字体中较窄字形的 （以“0”字形表示）。
IC 一般 字符推进 以元素字体表示的全宽字形 以“水”和（CJK 水象形文字，U+6C34）字形。
快速眼动睡眠 根元素的字体大小（默认为 16px）。
小时 元素的行高。
rlh 根元素的行高。
文本 CSS 是带上伸缩高度、下伸高度和 x 高度标签的 10 倍。x 高度表示 1ex，0 表示 1ch

视口相对单位

可以使用视口（浏览器窗口）的尺寸作为相对基础。 这些单位会占用可用的视口空间。

单位 相对于
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 显示在媒体查询中，并提供分辨率更高的图片。

检查您的理解情况

测试您对尺码知识的掌握情况

以下哪些是有效维度？

cm
厘米，有效的绝对尺寸。
ui
界面不是 CSS 中的维度。
英寸
英寸，有效的绝对尺寸。
8 日
不是 CSS 维度
像素
像素，有效的绝对尺寸。
ch
字符单位，有效的相对尺寸。
ux
用户体验不是 CSS 中的维度。
em
字母“M”单位、有效的相对尺寸。
前
字母“x”单位、有效的相对尺寸。

绝对单位和相对单位有何不同？

绝对值不能改变，但相对单位可以
绝对值可以变化，但计算它们的底数不能改变。
绝对长度根据单个共享基准值计算得出，其中相对单位与可以变化的基准值进行比较。
相对单位因其情境感知而具有更强的自适应性和灵活性，但绝对单位也具有强大的功能和可预测性，这可以成为某些设计的基础。

视口单位是绝对单位。

正确
它们可能会让人感觉是绝对的，但它们是相对于视口（可能是 iframe 或 WebView）而言的，并且不一定代表某种设备屏幕尺寸。
错误
它们是相对于创建它们时所在的文档窗口而言的，该窗口可能与设备屏幕相同，也可能不同。

资源