CSS长度单位详解：从绝对到相对，再到视口相关

精确测量是网页设计中至关重要的一环。CSS中至少存在十种不同的长度单位就足以说明这一点。每种单位都有其特定的用途，使网页能够更好地适应各种设备。掌握这些单位后，您可以更精确地调整元素大小。本教程将探讨CSS中可用的不同单位，并讨论在哪些情况下使用哪些单位以及如何使用它们。

关键要点

• CSS 提供多种长度单位，每种单位都有其特定用途，使网页能够更好地适应不同的设备。这些单位大致可分为绝对长度单位、相对长度单位和视口相对长度单位。
• 绝对长度单位（如像素、英寸、毫米和厘米）表示物理测量值，不受屏幕大小或分辨率的影响。但是，它们可能不适用于数字设备或分辨率未知的情况。
• 相对长度单位（包括em、rem和视口单位）根据其他预定义的值或特性调整其值，非常适合创建响应式布局。它们可以相对于使用的字体，也可以相对于屏幕的视窗高度和宽度。
• 视口相对长度基于视窗或视口的高度和宽度。这些单位（包括vh（视口高度）、vw（视口宽度）、vmin（视口最小值）和vmax（视口最大值））可用于根据浏览器窗口的尺寸缩放元素。

绝对长度单位

绝对单位是实际物理测量值的数字表示。这些单位与屏幕大小或其分辨率无关。因此，绝对长度单位不太适合在数字设备上使用或在分辨率未知时使用。当您为物理介质（如打印）设计时，这些单位更合适。

绝对单位包括：

• cm（厘米）
• mm（毫米）
• in（英寸）
• pc（派卡）
• pt（磅）
• px（像素）

请注意，规范的编辑草案还包括四分之一毫米 (q) 单位，但这是一种新单位，似乎没有任何浏览器支持。

您可能会注意到，在使用绝对长度时，同一单位的相同值在不同屏幕上的显示效果会有差异。这是因为屏幕的DPI（每英寸点数）不同。与低分辨率屏幕相比，高分辨率屏幕具有更高的DPI，因此图像或文本看起来更小。

所有绝对单位中最广泛使用的是像素 (px)。像素通常被理解为屏幕上的单个点，尽管从技术上讲它比这更复杂。它是最小的测量单位，通常用作其他单位的基准。

其他单位（如英寸、毫米和厘米）表示这些单位的物理大小。磅 (pt) 单位表示 1/72 英寸，派卡 (pc) 单位表示 1/6 英寸。以下是一些使用六种常用绝对单位的CSS代码：

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

CodePen 演示

相对长度单位

顾名思义，相对单位没有固定值。它们的值相对于其他一些预定义的值或特性。相对单位使轻松正确地调整元素大小变得容易，因为我们可以将它们的宽度、高度、字体大小等与其他一些基准参数相关联。

创建响应式布局时，通常建议使用这些单位，并且更适合数字媒体。它们的值可以相对于您使用的字体，也可以相对于屏幕的视窗高度和宽度。

相对单位包括：

• ex（x 高度）
• ch（字符）
• em（以打印 em 命名，但并不相同）
• rem（根 em）

让我们更详细地了解一下这些单位。

x 高度 (ex) 和字符 (ch) 单位

ex 单位很少在开发中使用。1ex 等于所用字体中小写“x”的大小。在大多数情况下，1ex 的值几乎等于 0.5em。但是，这会因字体而异。此单位可以被认为是 em 的垂直等效单位。

p {
  font-size: 2ex;
}

字符 (ch) 单位与“0”字符相关。1ch 是字体中“0”字符的推进量度。

p {
  margin: 2ch;
}

em 单位

em 单位的值等于基元素或父元素的字体大小。例如，如果父元素的字体大小为 20px，则对于所有直接子元素，1em 的值将计算为 20px。可以根据基单位轻松增加或减少子元素的字体大小。数字不必是整数。

使用 em 使我们能够轻松地将各种元素的字体大小保持在固定的比例。例如，如果父元素的 font-size 值为 50px，则将子元素的字体大小设置为 2em 将与将其设置为 100px 相同。类似地，将其设置为 0.5em 将使子元素的字体大小为 25px。

下面的演示展示了 em 单位的工作原理的一个简单示例：

CodePen 演示

但是，有时 em 单位会在嵌套元素的情况下产生不希望的结果。这是因为 em 值采用直接父标记的值，因此每个嵌套子元素都将具有相同的 em 值，但计算值不同，因为计算值始终相对于其直接父元素。因此，如果我们需要将当前元素的值设置为相对于非直接父元素或非根父元素的父元素的比例，则会使它变得困难。

以下是一个演示，展示 em 单位的异常嵌套效果。对于此示例，我们假设文档中的基准字体大小为 16px（这通常是默认值）：

CodePen 演示

请注意 HTML 中的嵌套元素，每个元素的内容都声明了计算出的字体大小。

以下是此示例的 CSS：

div {
  font-size: 1.15em;
}

span {
  font-size: 2em;
}

您可以看到，即使所有 div 元素都定义为 1.15em，但由于它们是嵌套的，因此它们的实际字体大小不同。

rem 单位

这就是 rem 单位派上用场的地方。rem 的值始终等于根元素（在 HTML 文档中为 html 元素）的字体大小。rem 演示类似于 em 单位的演示。以下是 CSS：

div {
 font-size: 1.15rem;
}

span {
 font-size: 2rem;
}

这是一个简单的演示，与之前的演示具有相同的嵌套，但这次使用 rem：

CodePen 演示

请注意，现在嵌套仍然存在，但不影响嵌套元素的计算字体大小。

视口相对长度单位

视口相对长度基于视窗或视口的高度和宽度。视窗或视口是屏幕上可见的区域或框架空间。

视口相对单位包括：

• vh（视口高度）
• vw（视口宽度）
• vmin（视口最小值）
• vmax（视口最大值）

视口高度 (vh) 和视口宽度 (vw)

vh 单位与视口的高度相关。vh 的值等于视口高度的 1/100。如果我们想根据浏览器窗口的高度缩放元素，则此单位很有用。例如，如果视口的高度为 400px，则 1vh 等于 4px。如果视口高度为 800px，则 1vh 等于 8px。

就像 vh 与窗口的高度相关一样，vw 单位与视口的高度相关。因此，可以类似地推导出 1vw 的值。这意味着 1vw 等于视口宽度的 1/100。例如，如果窗口的宽度为 1200px，则 1vw 为 12px。使用视口单位设置元素的宽度、高度和填充的 CSS 为：

div {
  height: 80vh;
  width: 95vw;
  padding: 1vw;
}

CodePen 演示

视口最小值 (vmin) 和视口最大值 (vmax) 单位

vmin 单位与值较低的视口边相关，因此它可以是高度或宽度。1vmin 的值等于长度最短边的 1/100。例如，如果视口的尺寸为 500 x 700，则 1vmin 的值等于 5px。如果尺寸为 1000 x 700，则值为 7px。

相反，vmax 会考虑视口的最大值。比例因子仍然是 1/100，因此 1vmax 等于值较高的边的 1/100。采用与上述相同的示例，如果视口的尺寸为 500 x 700，则 1vmax 的值等于 7px。如果尺寸为 1000 x 700，则值为 10px。这是使用 vmin 和 vmax 设置宽度和高度的 CSS：

div {
  height: 80vmin;
  width: 95vmax;
  padding: 1vmax;
}

CodePen 演示

浏览器支持

em、ex、px、cm、mm、in、pt 和 pc 所有浏览器都支持，包括旧版 IE。

ch Firefox、Chrome 27 、IE 9 、Safari 7 和 Opera 20 。

rem 所有正在使用的浏览器都支持，包括 IE9 。如果您需要更多支持，这里有一个 polyfill。

vw、vh 和 vmin Chrome 20 、IE 9 、Firefox 19 、Safari 6 和 Opera 20 。值得记住的一点是，在 Internet Explorer 中，vmin 通过非标准 vm 语法支持。对于 polyfill，您可以尝试 vminpoly 或使用 -prefix-free 和插件。

vmax Chrome 20 、Firefox 19 和 Opera 20 ，以及 Safari 6.1 。IE 不支持。您可以尝试此 polyfill 以获得一些 hacky 支持，并帮助解决不同移动浏览器中的一些错误。

结论

本教程简要介绍了 CSS 中可用的不同长度单位，包括许多有助于响应式布局和跨设备测量的单位。您是否在任何项目中使用过 rem 或视口单位？您的体验如何？请在评论部分分享使用这些单位的任何技巧或遇到的任何问题。

CSS长度单位常见问题解答

CSS长度单位有哪些不同类型？

CSS长度单位用于指定网页上各种元素的大小。CSS中有两种类型的长度单位：绝对单位和相对单位。绝对单位是固定的，并且不会根据页面的任何其他属性更改其大小。它们包括像素 (px)、磅 (pt)、派卡 (pc)、英寸 (in)、厘米 (cm) 和毫米 (mm)。另一方面，相对单位相对于另一个长度值。它们包括 em、ex、ch、rem、vw、vh、vmin、vmax 和百分比 (%)。

如何为我的项目选择合适的CSS长度单位？

CSS长度单位的选择取决于项目的具体要求。如果您需要一个固定大小，无论屏幕大小或字体大小如何都不会改变，则应使用绝对单位。但是，如果您希望您的设计具有响应性并适应不同的屏幕大小或字体大小，则应使用相对单位。

CSS中的“em”和“rem”单位有什么区别？

“em”和“rem”都是CSS中的相对单位。“em”单位相对于其最近的父元素的字体大小。另一方面，“rem”代表“root em”，相对于根元素 (html)，而不是父元素。这意味着“rem”将始终保持一致，无论嵌套级别如何，这使得更容易控制CSS中的整体大小。

CSS中的“vw”和“vh”单位是如何工作的？

CSS中的“vw”（视口宽度）和“vh”（视口高度）单位是相对单位，分别表示视口宽度和高度的百分比。“vw”的一个单位等于视口宽度的1%，“vh”的一个单位等于视口高度的1%。这些单位对于创建适应视口大小的响应式设计特别有用。

我可以在单个项目中混合使用不同的CSS长度单位吗？

是的，您可以在单个项目中混合使用不同的CSS长度单位。但是，了解这些单位的工作方式以及它们如何相互作用非常重要，以确保设计的一致性和响应性。例如，您可以将“px”用于边框宽度，“em”用于字体大小，“vw”用于布局宽度，以创建能够很好地跨不同屏幕大小缩放的设计。

使用CSS相对单位的优点是什么？

CSS中的相对单位提供了一些优点，尤其是在响应式设计中。它们允许元素的大小相对于彼此、视口大小或用户的默认字体大小进行缩放。这使得您的设计更灵活，并且能够适应不同的屏幕大小和用户偏好。

如何在不同的CSS长度单位之间进行转换？

在不同的CSS长度单位之间进行转换可能很复杂，因为它取决于各种因素，例如当前字体大小、视口大小和屏幕的像素密度。但是，有一些在线工具和计算器可以帮助您进行这些转换。

CSS中的默认字体大小是多少？

大多数浏览器中的默认字体大小为16px。这意味着1em或1rem默认等于16px。但是，用户可以在其浏览器设置中更改此默认字体大小，这就是为什么通常建议使用相对单位作为字体大小的原因。

像素密度如何影响CSS长度单位？

像素密度是指给定屏幕物理区域中的像素数，通常以每英寸像素 (PPI) 为单位进行测量。像素密度较高的屏幕在相同的物理空间中显示更多细节。在CSS中，像素 (px) 不是屏幕上的物理像素，而是一个参考像素，它是一个物理测量单位，它考虑了屏幕的像素密度。这意味着CSS中的1px长度可能对应于高密度屏幕上的多个物理像素。

CSS中的“ch”单位是什么？

CSS中的“ch”单位是一个相对单位，表示当前字体中“0”（零）字符的宽度。它对于设置需要与特定数量的字符对齐的宽度或边距很有用，而不管实际字体大小如何。