CSS回顾-长度单位汇总详解

一、简介

在 CSS 中，长度单位是构建网页布局的关键，像神奇的尺子度量元素大小、间距和位置。有绝对和相对长度单位，各具价值与应用场景，是网页设计的重要元素，为响应式布局等赋予空间表现力和交互性。

了解不同的长度单位对于精确控制网页布局和样式至关重要。以下是对 CSS 中常见长度单位的详细介绍：

二、绝对长度单位

绝对长度单位是指在任何设备和环境下都有固定物理尺寸的长度度量单位。它们与设备的物理特性相关，而不是基于其他元素的相对尺寸。例如，无论在何种屏幕分辨率或浏览器设置下，1 英寸（in）的长度定义是固定不变的。

2.1 px（像素）- 常用

px 是最常用的绝对长度单位之一。一个像素在屏幕上是一个物理点，其大小取决于设备的分辨率。

例如，在显示器的标准分辨率下，一个 CSS 像素通常对应于一个设备像素，但在高分辨率屏幕（如视网膜显示屏）上，一个 CSS 像素可能对应多个物理像素。

应用场景： 在网页设计中，常用于设置字体大小、元素的宽度和高度、边框宽度等。

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

浏览器兼容性及注意事项：

• 在大多数现代浏览器中，px 的显示效果相对一致。然而，在一些旧版本浏览器或者特殊的浏览器模式下，对高分辨率屏幕（如视网膜屏）的像素适配可能会出现问题。例如，某些早期版本的 Internet Explorer 在处理高 DPI（每英寸点数）屏幕时，可能无法正确缩放以 px 为单位的元素，导致元素显示尺寸与预期不符。
• px 在传统定义上是绝对长度单位，但在现代多样化的设备和高分辨率屏幕的环境下，它也表现出了一定的相对性。
• 当使用 px 来设置字体大小时，不同浏览器的最小字体大小限制也可能不同。一些浏览器（如 Chrome）允许用户设置最小字体大小，这可能会影响使用 px 设置的过小字体无法正常显示。

2.2 cm（厘米）

厘米是国际通用的长度单位，在 CSS 中可用于更符合实际物理尺寸概念的样式设置。

应用场景：在一些需要与实际物理尺寸相关联的设计场景中，比如设计打印布局或与实物尺寸相关的交互元素时可能会使用。

div {
    width: 10cm;
    height: 10cm;
}

浏览器兼容性及注意事项：

• 浏览器在将 cm 单位转换为屏幕像素进行显示时，可能会因为不同的屏幕 DPI 设置而出现差异。通常，浏览器会根据屏幕的 DPI 来计算 cm 对应的像素值，但不同浏览器对于 DPI 的识别和计算方式可能略有不同。
• 在打印相关的场景中，虽然 cm 等物理单位更符合实际打印需求，但不同浏览器的打印预览和实际打印效果可能会因为打印机驱动、打印设置以及浏览器对打印样式的支持程度而有所不同

2.3 mm（毫米）

毫米是比厘米更小的长度单位，同样常用于打印相关的 CSS 设置。1 厘米等于 10 毫米。

应用场景：在需要更精细的打印尺寸控制时，如设计名片、标签等小尺寸打印物品的样式时，毫米单位就很有用。

div {
    width: 10mm;
    height: 10mm;
}

2.4 in（英寸）

英寸是一个传统的长度单位，常用于打印相关的样式设置。1 英寸等于 2.54 厘米。

应用场景：在设置打印页面的尺寸或打印元素的大小时可能会用到。例如，当你希望在打印时将某个图像以特定的英寸尺寸显示。

@media print {
    div {
        width: 3in;
        height: 2in;
    }
}

2.5 pt（点）

点是印刷行业常用的长度单位，1 点约等于 1/72 英寸。在 CSS 中，它常用于与印刷相关的样式，特别是在设置字体大小等方面。

应用场景：在设计需要精确打印的文档，如书籍排版、正式报告等时，使用点来设置字体和元素尺寸可以更好地与传统印刷规范匹配。

div {
    width: 10pt;
    height: 10pt;
}

2.6 pc（派卡）

派卡也是印刷行业的单位，1 派卡等于 12 点。在 CSS 中，它可用于设置较大尺寸的打印元素或与印刷排版相关的样式。

应用场景：在设计大型印刷品的布局，如海报、宣传单页等，当需要以印刷行业标准来指定尺寸时可能会用到。

div {
    font-size: 36pc;
}

2.7 总结

日常开发中常用的长度单位为px，其他可以了解一下即可。

px（像素）

• 使用场景：用于精确控制元素的尺寸和位置，在固定布局设计、图像和文字的尺寸设定等方面广泛应用。例如设置按钮的宽度、高度，或者图片的大小。
• 优点：精确，在不同浏览器中显示相对稳定，能很好地实现像素级别的设计要求。
• 缺点：在高分辨率屏幕上，一个 CSS 像素可能对应多个物理像素，导致元素看起来比预期小，对于响应式设计不够灵活。

pt（点）、pc（派卡）、in（英寸）、mm（毫米）、cm（厘米）

• 使用场景：主要用于打印相关的样式设置，如文档打印时的字体大小、页面边距等。在需要精确物理尺寸输出的场景中很有用。
• 优点：基于物理尺寸标准，在打印时能保证尺寸的准确性和一致性。
• 缺点：在屏幕显示中，与设备像素的关联性不强，不符合屏幕视觉比例和用户体验习惯，很少用于屏幕布局。

三、相对长度单位

相对长度单位是指其长度值是相对于其他元素的尺寸、浏览器视口（viewport）或父元素的某种属性来确定的长度单位。与绝对长度单位不同，它们不是固定的物理尺寸，而是会根据相关的参考因素进行自适应调整。

3.1 em

em 是相对于元素的字体大小来计算的长度单位。对于 font - size 属性，它是相对于父元素的字体大小；

应用场景：在创建可伸缩的布局和文本排版时非常有用。当需要根据父元素的字体大小来动态调整子元素的尺寸时，em 是一个好选择。

.parent {
  font-size: 10px;
}
.child {
  font-size: 2em; /* 20px */
  padding: 1em; /* 10px */
}

浏览器兼容性及注意事项：

• 不同浏览器对于 em 单位的计算方式基本相同，但在涉及复杂的嵌套结构和字体继承时，可能会因为浏览器的默认字体设置和字体渲染方式而产生细微差异。例如，某些浏览器在处理多层嵌套的 em 单位时，可能会出现累积误差，导致元素尺寸与预期不完全一致。
• 在某些旧版本浏览器中，对 em 单位的支持可能不够完善，特别是在结合其他 CSS 属性（如盒模型相关属性）时，可能会出现布局错乱的情况。

3.2 rem

rem 是相对于根元素（html 元素）的字体大小来计算的。这使得在整个页面中可以更方便地统一控制元素的大小。例如，如果根元素的字体大小设置为 16px，那么 1rem 就等于 16px。

应用场景：在网页设计中，用于创建响应式布局和保持页面整体比例一致性。当需要在不同屏幕尺寸下统一调整元素大小时，rem 很实用。

html {
  font-size: 10px;
}
.child {
  font-size: 2em; /* 20px */
  padding: 1em; /* 10px */
}

浏览器兼容性及注意事项：同上方em相同。

3.3 %（百分比）

%百分比是一种特殊的相对长度单位，但是我们日常开发中也会用的比较多。它表示相对于包含它的父元素的长度单位。举个例子：

/* 页面结构
<div class="parent">
  <div class="son"></div>
</div>
*/
body {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: pink;
}
.parent {
  width: 100px;
  height: 100px;
  background-color: aqua;
}
.son {
  /* 1.正常情况下 */
  width: 50%; /* 50px */
  height: 50%; /* 50px */
  /* 2.当设置定位之后，元素层级就会提升，回去找上一级定位元素宽高 */
  position: absolute;
  width: 50%; /* 100px */
  height: 50%; /* 100px */
  background-color: chocolate;
  font-size: 50%; /* 相对于父元素的font-size */
}

应用场景：在网页设计中，用于两栏或多栏自适应布局。

3.4 vw（视口宽度百分比）、vh（视口高度百分比）

vw 表示视口宽度的百分比。1vw 等于视口宽度的 1%。

vh 是视口高度的百分比单位，1vh 等于视口高度的 1%。

应用场景：常用于创建与视口高度相关的布局元素，如全屏的背景图像或高度自适应的模块。

body {
  width: 100vw;
  height: 100vh;
}

3.5 vmin 和 vmax

vmin 取 vw 和 vh 中的较小值（1vmin 等于视口宽度和高度中较小值的 1%），vmax 取 vw 和 vh 中的较大值（1vmax 等于视口宽度和高度中较大值的 1%）。这两个单位在需要根据视口的较小或较大维度来设置元素尺寸时很有用。

应用场景：例如，在设计一个在不同设备方向下都能保持合适尺寸的正方形元素，可以使用 vmin。在设计一个始终占据较大空间的元素时，可以使用 vmax。

.box1 {
  width: 50vmin;
  height: 50vmin;
}
.box2 {
  width: 50vmax;
  height: 50vmax;
}

3.6 总结

CSS 相对长度单位是一种根据其他元素属性或视口尺寸来确定自身长度的单位。这些单位在响应式布局、元素比例缩放、文本排版等场景发挥重要作用，能让网页布局更灵活，适配不同设备：

• em 是基于元素自身或父元素字体大小；
• rem 是相对于根元素字体大小；
• vw 和 vh 分别是视口宽度和高度的百分比；
• vmin 和 vmax 基于视口最小或最大维度；
• 百分比（%）是相对于父元素相同属性的值。

四、绝对长度单位与相对长度单位对比

4.1 绝对长度单位

有固定参照标准，大小不依赖其他元素。

• px用于屏幕像素级控制，在高分辨率屏和响应式设计有局限；
• pt、pc、in、mm、cm主要用于打印，在屏幕布局很少用。

4.2 相对长度单位

基于其他元素属性计算，在响应式和动态布局有优势。

• em基于自身字体大小，有继承性但嵌套多时计算复杂；
• rem基于根元素字体大小，计算简单但受根元素字体大小影响；
• %基于包含块的长度信息，使用较多；
• vw和vh基于视口宽高百分比，用于响应式设计但复杂布局可能不够用；
• vmin和vmax基于视口宽高较小或较大值的百分比，用于屏幕方向变化，使用场景较窄且稍复杂。