尺码单位

CSS 播客 - 008:大小调整单位

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

对于这种情况,您可以使用 ch 单位,该单位等于渲染字体中“0”字符在其计算大小时的宽度。通过此单元,您可以使用根据文本大小调整的单元来限制文本的宽度,这样无论文本的大小如何,都可以实现可预测的控制。ch 单位是少数几个对此示例等特定情境有用的单位之一。

Numbers

数字用于定义 opacityline-height,甚至 rgb 中的颜色通道值。数字是没有单位的整数(1、2、3、100)和小数(.1、.2、.3)。

数字的含义取决于所处的环境。 例如,在定义 line-height 时,如果您在定义数字时未提供支持的单位,则该数字代表一个比率:

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

在此示例中,1.5 等于 p 元素计算出的像素字体大小150%。 这意味着,如果 pfont-size24px,则行高将计算为 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-boxdiv p 的宽度为 150px

如果将 marginpadding 设为百分比,则无论方向如何,它们都会占用父元素的宽度

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

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

在上面的代码段中,margin-toppadding-left 都会计算为 150px

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

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

如果将 transform 值设为百分比,该值取决于设置了转换集的元素。在此示例中,ptranslateX 值为 10%width50%。首先,计算宽度:150px,因为它是其父级宽度的 50%。然后,取 150px 中的 10%,即 15px

尺寸和长度

如果您为数字附加单位,则该数字会变成维度。 例如,1rem 是一个维度。在这种情况下,附加到数字的单位在规范中称为维度令牌。 长度是涉及距离的维度,可以是绝对的,也可以是相对的。

绝对长度

所有绝对长度均基于同一基准进行解析,因此无论在 CSS 中的何处使用,其结果都是可预测的。例如,如果您使用 cm 调整元素的大小,然后进行打印,那么与尺子相比,其尺寸应该是准确的。

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

如果您打印此页面,div 将以 10x5 厘米的黑色矩形的形式打印出来。 请注意,CSS 不仅可用于数字内容,还用于为印刷内容设置样式。 在设计印刷品时,绝对长度会派上用场。

单位 名称 等同于
cm 厘米 1 厘米 = 96 像素/2.54
毫米 毫米 1 毫米 = 1 厘米的 1/10
问题 四分之一毫米 1Q = 1 厘米的 1/40
in 英寸 1 英寸 = 2.54 厘米 = 96 像素
pc 皮卡 1pc = 1/6 英寸
pt 得分 1pt = 1 英寸的 1/72
px 像素 1 像素 = 1/96 英寸

相对长度

相对长度是根据基准值计算得出的,与百分比非常相似。与百分比相比,这两种方式的不同之处在于,您可以根据上下文调整元素的大小。这意味着,CSS 具有 ch 等以文本大小为依据的单位,以及基于视口(浏览器窗口)宽度的 vw。由于其自适应特性,相对长度在 Web 上尤为有用。

与字号相关的单位

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

单位 相对于:
em 相对于字体大小,即 1.5em 将比其父项的基本计算字体大小大 50%。 (历史上,大写字母“M”的高度)。
ex 启发式算法,用于确定在当前计算的元素字体大小中使用 x 高度、字母“x”还是“.5em”。
cap 元素当前计算出的字号中的大写字母的高度。
ch 元素字体的窄字形的平均字符前进(由“0”字形表示)。
ic 元素字体中全角字形的平均字符间距,以“水”(CJK 水意符号,U+6C34) 字形表示。
rem 根元素的字体大小(默认为 16px)。
小时 元素的行高。
rlh 根元素的行高。
文本、CSS 更加出色,并且提供了上衬线高度、下衬线高度和 x 高度标签。x-height 表示 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-width60ch,这意味着在计算的字体和大小中,它的宽度不能超过 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 的值为 192dpidpi 单位表示每英寸的点数。一个有用的上下文是检测分辨率非常高的屏幕(例如媒体查询中的 Retina 显示屏),并提供分辨率更高的图片。

检查您的理解情况

测试您对尺寸方面的知识

以下哪些是有效的维度?

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

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

绝对值无法更改,但相对单位可以更改
绝对值可以变化,但计算它们的底数不能改变。
绝对长度是根据单个共享基准值计算得出的,其中相对单位与可更改的基准值进行比较。
由于具有上下文感知能力,相对单位更具自适应性和流畅性,但绝对单位的强大功能和可预测性可以为某些设计奠定基础。

视口单位是绝对单位。

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

资源