px、pt、dpi、inch、mm一个实例秒懂他们的关系～

前段时间在工作中接到了一个需求：门店购物小票的设计，本来以为很简单的设计，最后却变成了一道数学题。

正常在设计印刷产品的时候，我们会用PS或AI去做，可以直接用物理单位：mm（毫米）、inch（英寸）、pt（点），模式可以选择CMYK。但是问题来了，开发告诉我他使用的前端设计器是以px为单位的，这样就需要找出px和各种物理长度之间的关系。转化为一个复杂的数学题，如下：

已知小票的宽度为80mm，打印机的分辨率为200dpi，小票的文字不小于8pt。求：设计稿的宽度和最小字号（单位为px）？

拿到问题我是一脸懵，对于那几个单位虽然经常听，但是说到关系，我一时也理不清。但是经过2小时的查阅资料，加上我有限的数学知识，还是解决了这个难题。下面是我的草稿：

红框内是结论，肯定大家都看不懂吧，因为5个月后的今天，我再看这个时，也完全看不懂自己写的东西。所以今天又花了半个多小时，来重新梳理了一下，终于又想通了。

下面就跟大家仔细讲一遍，也防止我以后再忘记。

· px

像素，这是UI设计师最熟悉的单位。

它不是物理上的长度单位，是屏幕上显示数据的最基本的点，单个像素没有具体的尺寸概念。

相同尺寸的显示器下，像素越多，单个像素的尺寸就越小，屏幕越清晰；像素越少，单个像素的尺寸就越大，屏幕越模糊。

上图是华为Mate Xs的屏幕分辨率：

2480px*2200px，就是长由2480个像素点组成，宽由2200个像素点组成。

上图是华为Mate Xs拍摄照片的分辨率：

4000万=长度上像素点的总个数 * 宽度上像素点的总个数。

· dpi

分辨率，图像每英寸的像素点数，这个图像可以是屏幕的图像也可以是实际打印的图像。一般我们做UI设计用72dpi，打印高清晰度用300dpi。dpi是屏幕像素和实际物理尺寸间的桥梁。

· inch、mm、 pt

英寸和毫米都是物理单位，可以直接测量 。

· inch、pt、mm

同属物理单位，有规定好的换算比率

1inch = 72pt = 25.4mm

· inch、dpi、px

dpi是每英寸长度内的像素点数

px = inch * dpi

回顾一下问题：已知小票的宽度为80mm，打印机的分辨率为200dpi，小票的文字不小于8pt。求：设计稿的宽度和最小字号（单位为px）？

设计稿宽度：

先把小票的宽度换算为英寸 80mm/25.4= 3.15inch

设计稿的宽度=3.15inch* 200dpi≈ 630px

最小字号：

先把字号转换为英寸8pt/72=（1/9）inch

最小字号=（1/9）inch*200dpi≈ 22px

---

一步一步的分析，是不是很esay，以后大家遇到类似问题可以直接把数值套进来使用。

下面来看一下打印的成品：