CSS回顾-长度单位汇总详解-二、绝对长度单位

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

div {
    font-size: 36pc;
}

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

px（像素）

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

秒客网