像素转换器的 15 个常见问题

像素转换器看起来就是一个输入框，但底层叠着一摞容易把人绊住的概念——DPI 还是 PPI、CSS 像素还是设备像素、自动识别究竟做了什么、为什么两个转换器对同一输入会给不同结果。本 FAQ 回答我们见到最多的 15 个问题。

读这篇的时候不妨同时打开 Screen Ruler 像素转换器，边读边试。

1. 像素转换器是什么？

像素转换器是一个工具，把一个像素数换算成物理长度（毫米、厘米或英寸），或反过来，在给定的 DPI 或 PPI 下进行。你给它一个数字和分辨率，它返回那个数字代表的现实世界尺寸。

公式是：

• inches = pixels / DPI
• mm = inches × 25.4

转换器就是替你跑这个公式，双向都行，配合合理的预设和设备 PPI 自动识别。

2. DPI 和 PPI 的区别是什么？

DPI（dots per inch，每英寸点数）历史上描述打印机输出：每线性英寸纸张上打印机落下多少墨点。PPI（pixels per inch，每英寸像素）描述显示器：每线性英寸屏幕上多少像素。

实际换算时这两个术语可以互换，因为数学完全相同。像素转换器接受任一作为「分辨率」输入。

适用场景上有区别：

• 打印输出用打印机或文档的 DPI（通常 300 或 600）
• 屏幕显示尺寸用设备的 PPI（差异大——下面会讲）

3. 「设备 PPI 自动识别」是什么？

像素转换器检测你当前正在用什么设备查看（iPhone 15、Galaxy S24、MacBook Pro 14 等），查出它真实的屏幕 PPI。它结合屏幕尺寸、devicePixelRatio 和一个设备数据库来识别设备。

这一点很重要，因为「100 px」的图在 326 PPI 的 iPhone 上比 401 PPI 的 iPhone Pro Max 上大 24%——自动识别给你真实的设备物理尺寸，而不是通用的 96 DPI 假设。

4. 为什么我的转换器和别的转换器给的答案不一样？

三个常见原因：

1. DPI 假设不同：一个工具假设 96 DPI（Web 默认），另一个 72 DPI（老的打印 / 屏幕），还有一个 300 DPI（打印）。100 px 分别是 26.5 mm、35.3 mm、8.5 mm——按各自的 DPI 都「正确」。
2. CSS 像素 vs 设备像素：Retina 屏上浏览器报告 CSS 像素（逻辑），实际硬件按 2× 或 3× 密度发光。不考虑 devicePixelRatio 的转换器会算偏。
3. 舍入：有些转换器在中间步骤就舍入；Screen Ruler 的转换器保留全精度到最终显示。

要得到正确答案，选对应介质的 DPI/PPI，选对应输入的转换器像素模式。

5. Web 的默认 DPI 是多少？

96 DPI，历史约定。W3C CSS 规范把「参考」渲染锚定为 1 inch = 96 px。现代 devicePixelRatio > 1 的显示器在布局层面仍把 CSS 暴露为 96 DPI，但以更高密度渲染。

6. 打印该用多少 DPI？

• 标准照片 / 文档打印：300 DPI
• 报纸 / 低质：150 DPI
• 大幅 / 海报：150 DPI 通常够，因为观看距离更远
• 精装艺术品 / 近距离广告牌：600 DPI
• 远距离广告牌：30–72 DPI 就行

把转换器的 DPI 输入和打印机输出 DPI 匹配，物理尺寸最准。

7. 为什么打出来的图模糊？

几乎一定是因为图的像素数太少，撑不起 300 DPI 下的打印尺寸。1000 px 的图在 300 DPI 下能锐利地打印到 3.33 英寸（约 85 mm）。打到 6 英寸，等效 DPI 降到 167，眼睛读作发软。用转换器查：pixel_count / target_inches = 等效 DPI。结果低于 200，图就会发软。

8. 我的屏幕上能看到的最小像素是多少？

典型观看距离下（桌面 50 cm，手机 30 cm），人眼大约能分辨每视角度 60 像素。326 PPI 手机 30 cm 距离大约是 1 px——所谓「Retina 门槛」。110 PPI 桌面显示器 50 cm 距离也大约 1 px。低于这个，眼睛就把相邻像素混在一起。

像素转换器不直接算视觉锐度，但你可以用它：把「30 cm 处的 1 角分」转换→约 0.087 mm→在 326 PPI 下 = 1 px。这就确认了门槛。

9. 像素转换器在手机上能用吗？

能。界面针对移动端优化——不用缩放、点击区域大、屏幕键盘数字输入。设备 PPI 自动识别在 iOS 和 Android 浏览器上都好使。

10. devicePixelRatio（DPR）重要吗？

DPR 在你需要在 CSS 像素（你的代码输出的）和设备像素（硬件实际点亮的）之间换算时重要。在 DPR = 3 的 Retina iPhone 上，100 CSS-px 宽的元素水平方向用 300 个设备像素渲染。

做物理尺寸换算时：

• 想知道元素在浏览器布局中显示多大，用 CSS 像素
• 想匹配硬件级像素网格（嵌入式 UI、e-ink、复古显示器），用 设备像素

Screen Ruler 像素转换器默认 CSS 像素，但暴露一个设备像素模式。

11. 能从物理尺寸反算到像素吗？

能——转换器是双向的。输「8 mm」和设备 PPI，它返回对应像素数。你有物理设计要求（按钮必须至少 8 mm 高方便拇指点击）需要知道分配多少像素时，这是对的方向。

12. 「px」和「rem」/「em」有区别吗？

有，大区别。rem 和 em 是相对字号的 CSS 单位，不是物理长度。默认设置下 1 rem 元素是 16 CSS px，但根字号设到 150% 之后就变成 24 px。像素转换器不直接换算 rem——先在样式表里把 rem 解析成 px（document.documentElement.style.fontSize），再把 px 换算成物理单位。

13. 「视口单位」（vw、vh）呢？

也是动态的。1 vw = 视口宽度的 1%，单位 CSS px。先按你目标设备的视口尺寸解析成 px，再跑换算。像素转换器直接接受 CSS px。

14. 转换器有多准？

数学精确到浮点精度。精度瓶颈在输入：

• DPI / PPI 输入：DPI 写错，答案按比例错。自动识别在当前设备上抵消这一点
• 设备 PPI 查表：Screen Ruler 设备数据库有 50 多个厂家给定 PPI 的设备。在列设备查表精确。未列设备退回到基于屏幕尺寸的估算（不那么准，通常 ±2%）
• 打印 DPI：假设打印机精确达到指定 DPI。真实打印机比规格差 1–2%

对大多数实际用途——给按钮定尺寸、检查打印锐度、对比设备——转换器远在重要的容差之内。

15. 为什么不直接用卷尺？

可以——这就是 Screen Ruler 屏幕尺子的用途，配合一次针对已知参照物的校准。像素转换器是反向问题：你有像素数（来自 Figma 规范、CSS 值、打印任务），想知道它对应的物理尺寸，不想先渲染出来。「这东西有多大」用屏幕尺子，「我需要多少像素」用像素转换器。

加分项：连珠炮微问答

几个我们也经常听到、不需要展开整段的问题：

• 显示器品牌重要吗？ 不——只有物理 PPI 重要。两台同分辨率的 27" 显示器 PPI 相同，与品牌无关。
• 为什么同一张 PNG 在 Photoshop 里看起来比浏览器里大？ Photoshop 读文件嵌入的 DPI；浏览器忽略它，按 CSS px 渲染。72 DPI 下 Photoshop 显示「更大」只是因为它按 1 图像像素对 1 屏幕像素的比例渲染。
• 能换算 SVG 尺寸吗？ 能——SVG 尺寸默认用 CSS px 表达（viewBox 控制缩放）。和其他 CSS px 输入一样对待。
• 为什么 iOS 上 screen.width 比手机实际分辨率小？ 因为 iOS 暴露的是 CSS 像素，不是设备像素。乘以 devicePixelRatio 得到硬件计数。
• 4K 显示器有「正确」DPI 吗？ 看对角线。27" 4K 约 163 PPI；32" 4K 约 138 PPI；43" 4K 约 103 PPI。像素转换器对在列显示器知道这些。
• 为什么把浏览器缩放到 200% 改了布局却不改 PPI？ 浏览器缩放只把 CSS px 值在布局上做倍数，不改底层物理 PPI。转换器内部用未缩放的参考值。
• 能离线用转换器吗？ 页面首次加载后会缓存，数学全在客户端跑，所以加载过一次就能离线用。
• 转换器支持深色模式和无障碍设置吗？ 支持——UI 跟随系统主题，支持纯键盘操作、屏幕阅读器、高对比度模式。

试一下

这些问题大部分在 Screen Ruler 像素转换器一个输入框里就能回答。打开它，挑你的 DPI 或者让它自动识别你的设备，答案就是一击之距。

如果你的问题不在这里，像素转换器使用指南走过完整流程附截图，像素转换器技术深度文讲数学和工程取舍。