返回博客

如何使用像素转换器（分步操作指南）

Screen Ruler TeamApril 28, 202613 min read
how to use pixel converterpixels to mmpixels to inchesDPI conversion

把像素换成物理单位，你不需要查表、不需要计算器，也不需要去搜索「96 px 等于多少毫米」。Screen Ruler Online 提供的免费 像素转换器 会瞬间帮你算好——前提是你得知道选哪个 DPI。本文带你走完整个流程：粘贴数值、根据使用场景挑选 DPI，然后从另一边读出正确的单位。读完之后，你会用三种不同方式完成三种不同场景下的转换：网页设计、印刷准备和照片冲印。

30 秒速览版

如果你赶时间，步骤如下：

  1. 打开 screenruler.online/pixel-converter。
  2. 在输入框里键入或粘贴你的数值。
  3. 点击与你数值匹配的单位标签（px / mm / cm / inch）。
  4. 选择一个 DPI 预设——网页用 96，印刷用 300，照片冲印用 600。
  5. 在结果面板读取转换后的数值。点击任一单位旁边的 复制 即可把它放到剪贴板。

整件事就这么简单。本文剩下的内容是为了帮你搞清楚：为什么 该选 96 而不是 300、当结果和你设计工具显示的不一致时怎么办，以及反向转换怎么做。

第一步：打开转换器

访问 https://screenruler.online/pixel-converter。页面瞬间加载完毕——无需账号，无需注册，转换器在服务端渲染，所以即使网络很慢也能算出结果。建议加书签，你以后会经常回来用。

页面分三块：左上是数值输入区，右上是 DPI 选择器，下方是结果面板，同时显示四种单位（像素、毫米、厘米、英寸）。页面一加载，默认状态就是 100 px @ 96 DPI，结果面板已经显示约 26.46 mm / 2.65 cm / 1.04 英寸。所以你输入任何东西之前都能确认页面工作正常。

第二步：输入你的数值

点击标着「Value to convert」的输入框，键入或粘贴你的数字。转换器接受：

  • 整数：100
  • 小数：42.5、0.75
  • 带千分位的数字：1,920 会被解析成 1920
  • 首尾空格： 100 也能正常工作
  • 零：合法输入——所有单位都返回 0

它不接受负数（长度不可能为负），也不接受非数字字符。如果输入非法，结果面板会显示「Enter a non-negative number to see the conversions.」而不是显示陈旧的数字——这样你绝不会一不小心复制到误导性数值。

第三步：选择源单位

输入框下方有四个单位标签：Pixels / Millimeters / Centimeters / Inches。点击与你刚输入的数字相匹配的那个。转换器会把当前激活的标签高亮成蓝色，并把你的输入当作那个单位处理；结果面板的另外三行就是对应的换算值。

常见使用场景：

  • 从设计工具来（Figma、Photoshop、Sketch、Adobe XD）：几乎一定是像素，所以保持 Pixels 选中即可。
  • 从打印机规格或 PDF 来：通常是毫米或英寸。点击对应标签。
  • 从 CSS 规则来（width: 1024px）：像素。
  • 从印刷稿来（「100 mm × 50 mm 的 logo」）：每次选一维 Millimeters。

第四步：选择正确的 DPI

这一步最容易出问题。转换器默认用 96 DPI——这是浏览器和操作系统统一采纳的 CSS 参考分辨率。它对网页工作是正确的，但对印刷和照片不对。DPI 下拉菜单提供五个预设：

预设 DPI 何时使用
Web standard 96 CSS、浏览器、操作系统参考
Mac legacy 72 早期 Apple 字体排版（如今几乎用不到）
Print draft 150 海报、横幅、大幅打样
Print high quality 300 杂志、书籍、包装——最常用的印刷 DPI
Photo print 600 艺术微喷、线稿、放大镜下也清晰的文字

还有一个 Custom（自定义）选项让你输入任意 DPI——对非标准硬件很有用（220 PPI 的 iPad、300 DPI 的打样机，或工业打印头的 1200 DPI）。

一个简单的经验法则：如果在屏幕上显示，用 96；如果要印刷，用 300；如果是近距离观看的照片冲印，用 600。

第五步：读取结果

下方的结果面板同时显示四种单位。你选作输入的那个单位会被高亮（这样你不会不小心把自己输入的数字当成换算结果读回去）。每行的数值按合适的精度格式化：

  • Pixels：整数（浏览器像素是离散的）
  • Millimeters：2 位小数（26.46）
  • Centimeters：3 位小数（2.646）
  • Inches：4 位小数（1.0417——字体排版用千分之一英寸）

点击任一单位旁边的 Copy，会把 <数值> <单位> 放进剪贴板。按钮会短暂显示「Copied!」让你确认已经复制。

第六步：分享或加书签

转换器把当前状态映射进 URL 的查询参数：?value=100&from=px&dpi=96。这意味着你可以：

  • 把 URL 分享 给同事，让他看到完全一样的转换结果。
  • 把特定配置加书签 ——例如，「300 mm @ 300 DPI」用于反复检查同一个印刷规格。
  • 重新加载 页面而不丢失数字。

URL 会随你输入实时更新，所以没有「保存」按钮要记。

算例 1：网页 banner 尺寸

有人让你按「1920 × 720 px」做一张主视觉图，但市场团队想知道在典型桌面显示器上这有多大。

  1. 在输入框键入 1920。
  2. Pixels 标签已经默认选中。
  3. DPI 已经是 96（网页）。
  4. 读毫米那一行：508.00 mm ——大约 50 cm 宽。
  5. 把输入重置成 720 来算高度：190.50 mm ——大约 19 cm 高。

所以这张 banner 在标准 1080p 显示器上物理大小约为 50 × 19 cm。在 4K 屏幕、200% 缩放的环境下，相同的 CSS 尺寸依然覆盖这个物理面积；在 4K 屏幕、100% 缩放下则会变成一半大——这正是为什么 CSS 用 96 参考像素，与物理像素密度无关。

算例 2：精确尺寸的印刷 logo

打印商让你交一个 logo，要求「在 300 DPI 的宣传册上恰好打印成 50 mm 宽」。你需要知道源稿要提供多少像素的细节。

  1. 在输入框键入 50。
  2. 点击 Millimeters 标签。
  3. 把 DPI 切到 Print high quality (300)。
  4. 读像素那一行：591 像素。

所以你的源稿至少要 591 像素宽。如果导出成 600 px，你有 1.5% 的裁切余量，并且实际打印分辨率是清晰的 305 DPI。如果你只导出 400 px，打印商会上采样到 591 像素，等效 200 DPI——在亮面纸上肉眼可见地发软。

转换器是双向的：你也可以从期望的像素数开始，把 DPI 切换到对应的介质，然后读出对应的物理尺寸。

算例 3：相机照片冲印

你用一台 2400 万像素的相机拍了一张 6000 × 4000 像素的照片。你想以 300 DPI 印在亮面相纸上。最大能印多大？

  1. 在输入框键入 6000。
  2. Pixels 标签选中。
  3. DPI = 300。
  4. 读英寸那一行：20.0000 英寸 ——再读厘米那一行：50.800 cm。

所以最长边在原生分辨率下恰好印 50.8 cm。再大就要上采样：70 cm @ 300 DPI 需要 8268 像素，而你只有 6000。你要么接受偏软的成像（约 215 实际 DPI），要么把成品缩到约 63 cm 保持原生清晰度。

反向操作：从尺寸推算像素

大多数时候你从像素出发换算成物理单位。但反过来用一样好用：

  • 印刷规格：「需要一个 100 × 100 mm 的图标 @ 300 DPI。」 → 输入 100 mm @ 300 DPI → 每边 1181 像素。
  • 横幅广告：「210 mm 宽 @ 96 DPI 用于 A4 PDF 阅读器。」 → 794 像素。
  • 显示面板：「11.6 英寸的 1080p 显示——它的 DPI 是多少？」 → 反算 DPI：1920 px / 11.6 inch ≈ 165 DPI。把 Custom DPI 设为 165。

第三种情况下，转换器没有「计算 DPI」模式，但你可以通过输入 11.6 英寸 @ 候选 DPI，查看像素数是否匹配来验证。

常见错误

忘了为印刷切换 DPI。 「100 mm 的 logo @ 300 DPI」给你 1181 像素。如果你忘了切，用默认的 96 DPI，转换器说 378 像素——然后打印商会告诉你文件太小。读印刷数字之前一定要检查 DPI 下拉菜单。

相信文件保存的 DPI 标签。 Photoshop 的「Save for Web」会把文件元数据设为 72 DPI。浏览器忽略这个值。印刷机用排版工具告诉它的值，而不是文件标签。转换器也忽略——它每次都问你要用哪个 DPI。

在 Retina 屏上混淆 CSS 像素和设备像素。 当你用物理尺子量 Retina 屏并反推 DPI，iPhone 上得到约 163 PPI。CSS 仍然用 96。两个都对——它们描述的是不同的东西。转换器讲的是 CSS 像素。如果要在特定屏幕上做物理像素测量，请用 Screen Ruler 工具 校准。

忽略输入行高亮。 当 Pixels 行被高亮时，那一行的数值是你的输入，不是换算结果。读另外三行。（这个错误抓住的设计师比你想象的多。）

下一步

转换器进入你的工作流之后，往往会用到两个相关工具：

  • 长宽比计算器 处理另一个正交问题：「1920 × 1080 和 3840 × 2160 是同一个形状吗？」当你为不同介质重做素材，且尺寸和形状都重要时，把它和像素转换器一起用。
  • Screen Ruler 处理真实世界的校准：它在你屏幕上显示一把 1:1 的尺子，让你拿 CSS 测量对照物理实物（信用卡、印刷品、硬币）。如果你怀疑某块显示屏的 DPI 对不上，这个工具能确认。

把这三个工具都加书签，整套「像素到物理单位」的工作流就只剩一个标签页的距离。

相关阅读

相关文章