像素与毫米：完整的单位转换指南

Screen Ruler TeamApril 28, 202618 min read

像素转换器像素转毫米pixels to inchesDPIPPI

每一块屏幕和每一次印刷都站在同一条断层线上：像素没有固定的物理尺寸。同样的 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，印出来你就会看到糊。

摄影：从传感器到照片打印

一台 2400 万像素的相机产出大约 6000 × 4000 像素的图像。摄影师不停地在做"像素 → 物理打印尺寸"的转换：

At 300 DPI: 6000 / 300 = 20 inches wide → 50.8 cm
At 240 DPI: 6000 / 240 = 25 inches wide → 63.5 cm
At 180 DPI: 6000 / 180 ≈ 33 inches wide → 84.7 cm

300 DPI 是手臂距离观看（书籍、画廊作品）的金标准。当观看距离变远时，240 DPI 也是可以接受的——那种你需要退后几步才看的大幅墙面艺术。180 DPI 是大多数人开始察觉到模糊的下限。

Pixel Converter 的 300 和 600 DPI 预设干净地覆盖了摄影工作流：把传感器的像素数填进去，看到英寸和厘米的打印尺寸，决定是按原生分辨率打印还是上采样。

Retina、HiDPI 与设备像素比

iPhone 4 在 2010 年引入了 "Retina" 这个品牌词——指一种像素密度高到在典型观看距离下，单个像素已经低于人眼分辨率的显示器。今天，大多数笔记本、平板和手机屏幕都是 HiDPI 的，每个 CSS 像素对应两到三个物理像素。

对于这个转换器来说，这件事什么都没有改变。按照 Web 约定，CSS 像素仍然是 96 DPI。HiDPI 那部分数学由浏览器处理。如果你做的是图标设计或资源导出，专门为 devicePixelRatio 服务（例如导出同一资源的 @2x 和 @3x 版本），那是的，把源像素数加倍或加三倍——但转换为物理毫米时，仍然按 CSS 参考使用 96 DPI。

如果你要在一块 HiDPI 屏幕上做 1:1 物理尺寸的视觉样稿，可以选择：

继续以 CSS 像素 + 96 DPI 工作（推荐——OS 自己处理缩放）
乘以 window.devicePixelRatio 得到真实物理像素数，再除以这台设备真实的 PPI（因硬件而异）来推物理尺寸

转换器做的是更简单的那一版。要在某块具体屏幕上做精确的物理尺寸测量，先用 Screen Ruler tool 校准。

常见的坑

72 和 96 混着用。 从 Illustrator 或 Photoshop 导出的老 Mac 资源有时带着 72 DPI 的元数据标签。你把它们拖进一个 300 DPI 的印刷版面，软件可能会出乎意料地把它们放大。永远去看导入文件的"实际"像素尺寸，而不是它的 DPI 标签。

Web 导出上的 "DPI"。 Photoshop 的 "Save for Web" 默认把 DPI 设为 72——这无所谓，因为浏览器会忽略这个标签，按 96 处理。别担心。对 Web 来说，重要的是像素数。

把印刷压到原生分辨率以下。 阅读距离观看的印刷品低于 200 DPI，软糊就开始变得明显。Pixel Converter 不会拦着你，但数学会告诉你真相：一张 600 px 的素材放到 50 mm 宽是 305 DPI；同样的素材放到 100 mm 宽就只有 152 DPI。

忘记 4K 显示器上的 CSS 缩放。 一份 1080p 的设计在 200% 缩放的 4K 显示器上看起来还行。把缩放降到 100%，同一份设计就会变成原来一半的大小。永远在用户典型的缩放下测试，而不是在原生分辨率下。

重采样时长宽比悄悄漂移。 把一张 1920 × 1080 的图缩放到一个 1024 × 1024 的方框，你要么得裁，要么得变形。像素数会变；长宽比也很重要。当两个因素同时入场时，把 Pixel Converter 和 Aspect Ratio Calculator 配合着用。

什么时候用哪个 DPI

挑 DPI 的快速参考：

Web 设计、App UI、纯浏览器资源：96 DPI。永远是。
可能要走印刷的文档模板：排版用 96，导出前按 300 DPI 模拟一遍印刷输出。
打印样稿、大幅面横幅、远距离观看的海报：150 DPI 没问题。
杂志、书籍、包装、近距离观看的营销物料：300 DPI 是底线。
照片打印、精细线条艺术、放大镜下看的文字密集排版：300–600 DPI。
老 Mac 遗留资源：72 DPI 因兼容性而存在。新工作不要用。

拿不准时，屏幕默认 96，印刷默认 300。Pixel Converter 把这两者都做成了一键预设。

串起来看

一个典型的品牌设计师的一天可能是这样的。产品经理来要"一张主视觉横幅，1920 × 720 px，要在活动海报上以 300 DPI 印得锐利"。你打开转换器，在像素栏里输入 1920，切到 300 DPI：得到 162.56 mm 宽。海报规格是 297 mm × 420 mm（A3）。在 162.56 mm 下，这张素材只够填上半部分——也就是说，要在 300 DPI 下做到 297 mm 满幅，你需要一张 3508 × 1316 px 的源图。这下你知道该跟摄影师要什么了。

一个把印刷样稿改成网页的开发者走的是相反方向。样稿在 300 DPI 下高 100 mm——那是源图里的 1181 px，但网站是在屏幕上以 96 DPI 显示。如果他们直接在 CSS 里把这张素材设成 1181 px 高，它在屏幕上就会变成大约 308 mm 高，远远过头了。他们要么得把素材下采样到 378 px（= 100 mm × 96 / 25.4），要么显式地用 mm 单位写 CSS 尺寸。

这些转换简单到几轮之后就能记住。但当你在介质之间快速搬运素材时，有一个专门处理这套数学、记得 DPI 预设、还能让你直接复制结果的工具，就是顺滑工作流和不停在脑子里做算术之间的差别。这正是 Pixel Converter 存在的理由。