像素转换器

什么是像素转换器？

像素转换器在数字像素和真实世界的长度单位（毫米、厘米、英寸）之间进行换算，DPI 可由你自由选择。CSS 像素默认按 96 DPI 计算，而印刷工作通常使用 300 DPI，照片印刷甚至能达到 600 DPI——同样的像素数在不同的 DPI 下对应的物理尺寸差别极大。在四个单位中任选一个输入数值，挑一个符合你当前场景的 DPI 预设，其余三个单位即时更新。每一个结果都只需一次点击就能复制到剪贴板。

如何使用像素转换器

1. 在输入框中填写要换算的数值——例如 100。
2. 选择该数值对应的单位：像素、毫米、厘米或英寸。
3. 选一个 DPI 预设——网页用 96 DPI、印刷用 300 DPI，或者选择「自定义」输入你自己的 DPI。
4. 在下方的结果面板中查看其余三个单位的换算值。
5. 点击任一结果旁的「复制」即可放入剪贴板，或直接分享 URL——你的输入会以查询参数形式保留下来。

谁会用到像素转换器

• 学生： 需要做像素到毫米换算的数学和物理作业，以及计算机图形课中的屏幕分辨率练习。
• 网页与 UI 设计师： 把实物原型上的毫米测量值，按照对应的参考 DPI 换算成 CSS 像素，用来确定图标、内边距和组件的尺寸。
• 印刷设计师： 把 Photoshop 或 Figma 导出的像素尺寸，在 300 DPI 下换算为毫米和英寸，再交付给印刷厂。
• 摄影师： 根据相机原始输出计算实际打印尺寸（例如 4000 × 3000 px 在 300 DPI 下能打印 13.3 × 10 英寸）。
• 开发者： 比对 CSS 像素值与产品规格或无障碍规范中要求的物理尺寸，验证实现是否到位。

为什么选这款转换器

• 四个单位（像素、毫米、厘米、英寸）随你输入即时更新。
• 5 种内置 DPI 预设覆盖常见场景——网页 96 DPI、Mac 传统 72 DPI、印刷 150/300/600 DPI。
• 支持自定义 DPI，适配非标准显示器（Retina、高分辨率显示器）和特殊印刷工作流。
• 可分享链接——数值、源单位和 DPI 都会作为查询参数保留在 URL 里。
• 100% 浏览器内运行：无需注册，结果面板没有广告，计算逻辑完全开源。

结果有多精确？

转换器使用标准的「每英寸 25.4 毫米」换算系数和你指定的 DPI，全部以 IEEE 754 双精度浮点完成计算。结果在浮点舍入范围内完全精确（相对误差 ≤ 1×10⁻⁶）。唯一可能引入实际误差的是 DPI 数值本身——如果你的显示器并非真的运行在所设的 DPI 下，请先用 Screen Ruler 工具完成校准。

常见问题

什么是像素？

像素是数字显示器或图像中最小的离散单元。它的物理尺寸并非固定——取决于屏幕的像素密度（DPI）。在 96 DPI 的网页显示器上，1 像素正好等于 1/96 英寸（约 0.265 毫米）；在 300 DPI 的印刷品上，1 像素则等于 1/300 英寸（约 0.085 毫米）。

什么是 DPI？为什么它重要？

DPI（每英寸点数）是像素与物理长度之间的换算系数。同样的 100 px，在 96 DPI 下对应 26.46 毫米，但在 300 DPI 下只有 8.47 毫米。换算时必须使用目标载体（屏幕、印刷品或导出文件）的实际 DPI，结果在物理意义上才有效。

如何把像素转换为毫米？

把像素数除以 DPI 得到英寸，再乘以 25.4 得到毫米：mm =（px / DPI）× 25.4。100 px 在 96 DPI 下：100/96 × 25.4 ≈ 26.46 毫米。这一步转换器会即时帮你完成。

网页设计应该用 72 DPI 还是 96 DPI？

用 96 DPI。CSS、浏览器和操作系统在 1990 年代就统一以「每英寸 96 个参考像素」作为标准。72 DPI 是早期苹果排版（1 像素 = 1 印刷点）的遗留值，目前仅对特定的 Mac 时代素材还有意义——现代网页工作一律按 96 DPI 计算。

印刷应该用什么 DPI？

高质量的杂志和书籍印刷用 300 DPI，打样和大幅面输出用 150 DPI；600 DPI 仅适用于摄影印刷、精细线条作品或需要放大检查的文字。一般工作高于 300 DPI 只会增大文件，对绝大多数纸张都看不出明显改善。

Retina/HiDPI 屏幕会影响换算吗？

Retina 等高分辨率显示器会用 2 到 3 个物理像素来渲染 1 个 CSS 像素。本转换器默认按 CSS 像素工作，所以 100 CSS 像素在 96 DPI 下对任意 HiDPI 屏幕都是正确值。如果你需要物理像素数，把结果乘以设备像素比（浏览器中即 window.devicePixelRatio）即可。

为什么我的网页设计在 4K 显示器上看起来变小了？

大多数操作系统会让 4K 显示器以 150–200% 缩放运行，这样 CSS 像素的视觉尺寸就接近 1080p 屏幕。如果没有正确缩放，同样的像素数在更小的物理英寸里铺开，画面就会显得更小。可以在系统设置中调整 DPI 缩放，或者改用 rem、百分比等单位代替固定的 px。

DPI 深入解析 — 一次选对数字

每一次像素到长度的换算只有一个公式：长度 = 像素 ÷ DPI。难点在于选对与输出媒介匹配的 DPI。选错不会报错，只会悄悄给出数学上正确、物理上错误的结果。下方预设覆盖 95% 真实工作场景。

Web 工作 — 始终用 96 DPI

1990 年代末，CSS、浏览器和操作系统统一为每英寸 96 参考像素，至今未变。所有现代浏览器都将 1 CSS 像素视为 1/96 英寸，不论物理显示器为何。Retina 与 4K 显示器以更高物理密度渲染，但 OS 会把 CSS 像素缩放回 96 DPI 参考，所以你的数学保持有效。72 DPI 视作历史遗产 — 仅当你从 OS X 之前的 Mac 拉取素材时才相关。

印刷工作 — 150、300 或 600 DPI

大部分杂志、书籍和消费级照片印刷用 300 DPI。草图打样和大幅面工作可降至 150 DPI，因为观看距离掩盖了分辨率损失；这能减半文件体积，一米外仍显锐利。仅当印刷品会近距离审视时才用 600 DPI — 精细线稿、技术绘图、光面纸上的小字。超过 600 DPI 几乎不会带来可见质量提升，反而浪费磁盘空间。

Retina 与 HiDPI — 在 CSS 像素中工作

Retina 显示器为每个 CSS 像素渲染两到三个物理像素，但 OS 把这层隐藏在你的代码之外。布局计算坚持用 CSS 像素 (96 DPI)。若需要实际物理像素数 — 例如交付应在每台设备上保持清晰的位图素材 — 运行时乘以 window.devicePixelRatio 并提供 @2x 或 @3x 变体。像素转换器默认把输入当作 CSS 像素；只有当你确实测量过某已知显示器的物理像素密度时才勾选自定义 DPI。

常见转换模式

某些像素值出现得太频繁，值得记下来。下表展示 100 px、1000 px 和典型全高清宽度 (1920 px) 在四种最常见 DPI 值下的换算结果。

开发者实用提示

先在 DevTools 中验证

信任换算之前，先在控制台输入 window.matchMedia('(min-resolution: 96dpi)').matches 确认浏览器报告的是 96 参考 DPI。在正确配置的系统上返回 true。若返回 false，说明 OS 缩放或缩放层级非默认，换算需要调整。

始终以目标 DPI 导出

Photoshop、Figma 和大多数设计工具默认按画布 DPI 导出。导出前先把画布 DPI 设为目标媒介 — 把 96 DPI 画布按 300 DPI 导出并不会真正上采样图像，只是改写元数据，结果以预期物理尺寸的三分之一印出。

校准屏幕以建立真值基准

若你的工作依赖物理精度 — 把手持物体对着屏幕测量、把图标尺寸对齐到已知信用卡宽度 — 先打开 Screen Ruler 工具用真实信用卡校准。你屏幕的实际 DPI 鲜少与规格表一致；校准能把换算锚定到物理现实。