每一块屏幕和每一次印刷都站在同一条断层线上：像素没有固定的物理尺寸。同样的 100 像素矩形，在普通浏览器里大约是 26 毫米，在杂志页面上大约是 8 毫米，而在精细艺术印刷上甚至只有 4 毫米。在数字像素与真实长度之间做翻译的那个数字，就是 DPI（每英寸点数）——把它搞对，就是一个能从容点中的按钮和一个会按偏的按钮的差别，是一个清晰锐利的 Logo 和一个糊成一团的 Logo 的差别。
这篇指南会带你走一遍：像素到底是什么、为什么 DPI 重要、像素与毫米之间转换所依赖的数学、你会在实际工作中遇到的几种 DPI 标准，以及设计师、摄影师、开发者必须做这种转换的实战工作流。一路上，我们会指向 Screen Ruler Online 上免费的 Pixel Converter——你可以在另一个标签页里打开它，边读边对一对数字。
像素是什么？
像素（pixel，"picture element"——图像元素的缩写）是数字图像或显示器中最小的离散单元。在屏幕上，它是一个可寻址的点，通常由三个子像素——红、绿、蓝——组合而成，叠加产生一种被感知到的颜色。在图像文件里，它是颜色值网格中的一格。关键在于，像素是一个逻辑单位，而不是物理单位。它的真实尺寸完全取决于渲染它的设备是如何被校准的。
考虑一张 1920×1080 的图片。在一台以原生分辨率运行的 24 英寸显示器上，每个像素大约 0.265 mm 宽。在一台 5.5 英寸手机上把同一张图片缩放到适配屏幕，每个像素大约只有 0.06 mm。在一本以 300 DPI 印刷的杂志上，每个像素是 0.085 mm。图片是同一张；像素的物理尺寸是输出介质的函数。
这就是为什么一旦跨介质，纯像素的规格就会失效。"把按钮做成 44 px 高"在 iPhone 上能给出舒适的点击区，但在一块 4K 显示器上会变成一条细缝，在户外广告牌上则会变成一个庞然大物。要谈论真实尺寸，就必须谈论 DPI。
DPI（以及 PPI）是什么？
DPI 全称 "dots per inch"（每英寸点数）——每一英寸物理表面上塞进的像素（或印刷上的点）数。PPI 是同一个想法专门用在屏幕上时的说法（"pixels per inch"，每英寸像素数）。在日常写作里两者经常混用；这篇指南大多用 DPI，因为转换公式直接依赖它。
DPI 是那个转换因子：
inches = pixels / DPI
millimeters = (pixels / DPI) × 25.4
常数 25.4 是固定的：按国际定义，一英寸里恰好有 25.4 毫米。变量是 DPI，而它会随介质改变：
场景
典型 DPI
含义
Web（CSS 像素）
96 DPI
浏览器和操作系统的参考分辨率
早期 Mac 排版
72 DPI
早期 Apple 软件里，1 像素 = 1 印刷点
草稿 / 大幅面印刷
150 DPI
海报、横幅、打样
高质量印刷
300 DPI
杂志、书籍、包装
摄影 / 精细艺术
600 DPI
照片打印、线条画、放大镜下看的文字
同样的 100 像素，在这五个 DPI 下分别对应：
DPI
英寸
毫米
72
1.389
35.28
96
1.042
26.46
150
0.667
16.93
300
0.333
8.47
600
0.167
4.23
注意 DPI 越高，物理长度收缩得有多快。像素数从未变过；变的只是假设的密度。
把数学一步步走一遍
假设你有一张 800 像素宽的横幅，想知道它在屏幕上有多大。从公式开始：
inches = pixels / DPI = 800 / 96 ≈ 8.33 inches
millimeters = inches × 25.4 ≈ 211.67 mm
centimeters = inches × 2.54 ≈ 21.17 cm
所以 800 px 在标准 Web 96 DPI 下大约是 21 cm 宽——大致是半张 A4 纸。
现在把同样的 800 px 资源搬到 300 DPI 的印刷上：
inches = 800 / 300 ≈ 2.67 inches
millimeters ≈ 67.73 mm
像素数完全相同，物理打印尺寸却小得多。要在印刷上得到同样的物理尺寸，你得把像素数翻三倍，到大约 2400 px。这就是为什么印刷设计师总要"300 DPI 版本"的 Web 资源——照片或 Logo 必须以更高的像素密度被重采样或重新导出，才能在同样的物理尺寸上保持锐利。
反方向也一样常见。印厂要一张 100 mm × 50 mm 的 Logo，300 DPI。所需的像素尺寸是：
pixels = (millimeters / 25.4) × DPI
= (100 / 25.4) × 300 ≈ 1181 px wide
= (50 / 25.4) × 300 ≈ 591 px tall
Pixel Converter 实时完成这个来回。在毫米输入框里键入 100，把 DPI 切到 300，点一下单位芯片就能看到 1181 像素。
Web 的现实：96 DPI 与 CSS 像素
现代 Web 浏览器、操作系统和 CSS 规范都将 每英寸 96 个参考像素 标准化。这意味着一条 96 px 的线本应渲染成一英寸的实际屏幕长度。在实际中有几件事让事情复杂化：
显示缩放。 macOS 和 Windows 可以把 UI 缩放到 125%、150%、200% 等等。一条 100 px 的线，在 200% 缩放的 4K 显示器上，与在 100% 缩放的 1080p 显示器上看起来同样大——这是系统层面的调整，让文字不至于在高 DPI 硬件上小到看不清。
设备像素比（DPR）。 Retina 或 HiDPI 显示器为每个 CSS 像素渲染多个物理像素。iPhone 屏幕通常以 DPR 3 运行，意味着浏览器会为你指定的每个 CSS 像素绘制 3 个真实像素。这会让文字保持锐利，而你不需要做任何额外的事；CSS 仍然以 CSS 像素说话，由 GPU 处理上采样。
浏览器缩放。 用户主动的缩放会改变 CSS 像素与物理像素之间的比例。150% 缩放会把一条 100 px 的线变成布局引擎眼里的 150 个 CSS 像素的工作量。
要点：Web 设计就用 96 DPI。CSS 像素本身就讲对了语言。如果你做的是一个需要按精确尺寸打印的物理样稿，把转换器切到 300 DPI 重新算一遍即可。
印刷的现实：300 DPI 与重采样
印刷期望源数据的每一个像素都按设备的分辨率被物理塞进去。一本以 300 DPI 印刷的杂志，希望在每一英寸印刷面上看到大约 300 像素的细节。送过去的少了，印刷机就得插值——你的边缘会变软，细线会出现锯齿。
设计师分两步做转换：
以真实单位排版。 一份杂志跨页是 "210 mm × 297 mm"（A4 竖版），不是 "2480 × 3508 像素"。InDesign、Affinity Publisher，以及 Photoshop 的印刷模式都允许你以毫米或英寸建立画布。
按目标 DPI 导出。 当版面被导出为 PDF 或 TIFF 给印厂时，软件会把栅格图像重采样到目标 DPI。一张以 100% 比例放在 300 DPI 页面上的照片，在像素层面就应该已经是 300 DPI。如果它在像素层面只有 150 DPI，导出时会被拉大一倍——软糊就是从这里开始渗进来的。
Pixel Converter 在第 1 步最有用——决定要采购多少像素的素材。如果你需要一个 Logo 在 300 DPI 的宣传册上恰好 50 mm 宽，那就需要 591 px 的源细节。只供 300 px，印出来你就会看到糊。
摄影：从传感器到照片打印