屏幕设计常用单位

pt（磅）

• 计算公式：1 pt（磅）= 1 / 72 inch (1 inch = 2.54 cm)
• pt（磅）的使用就是为了平面设计师方便控制输出图像的实际大小

dot（点）

• dot（点）很抽象，指的是采样或输出的最小单位，是一个物理概念
• 不同的设备里会和不同的具体事物关联起来：打印机的 dot（点）指墨点，扫面仪的 dot（点）指色彩信息，屏幕设备的 dot（点）指一个物理实际像素
• 屏幕设备里的一个灯点对应设计师图纸里的一个物理像素，这也是设计师使用物理像素为最小单位制图的原因：方便控制细节（例如一个物理像素高度线条在高分屏上代码实现出现小数，用切图控制更好），并且灯点数目是不会受各个平台单位定义方法影响的

pt（逻辑像素）

• 在非 Retina 设备上，一个 pt（逻辑像素）对应屏幕上的一个灯点（物理像素，设计稿中的基本单位）
• 在 Retina 2x 设备上，一个 pt（逻辑像素）对应屏幕上的四个灯点
• 在 Retina 3x 设备上，一个 pt（逻辑像素）对应屏幕上的九个灯点
• Retina 的本质就是在内容，大小完全不变的情况下加大一个逻辑像素被屏幕显示的灯点数量，从而加强清晰度

dpi（点每英寸）

• 顾名思义，就是每英寸有多少个采样点的意思，所以 dpi（点每英寸）也叫物理密度
• 关于 dpi（点每英寸）的误解：dpi（点每英寸）超过 300 肉眼无法识别物理像素只是苹果的营销手段而已（100 米开外的广场屏幕也是无法识别物理像素的）

ppi（系统的像素每英寸）

• ppi（系统的像素每英寸）是根据最早的时候市面上常见的 dpi（点每英寸）硬性规定一个默认值（ Windows 下是 96, 其他系统都是 72 ）
• PS 的 100% 显示的尺寸大小其实就是在规定的 ppi（系统的像素每英寸）下显示的尺寸大小，这个尺寸和真实设备的尺寸是不一致的，说白了，就是像素在 PS 里尺寸很大（以 ppi 显示），到手机上变小了（以 dpi 显示）
• 目前为止，除了 Windows 系统软件，其他所有涉及图像设备的 ppi（系统的像素每英寸）都遵循苹果公司 1 px = 72 inch 的标准，包括浏览器
• 实际设备的 dpi 越高于 ppi, 显示尺寸就会越小于真实尺寸
• 苹果规定 3GS 上 1 pt（逻辑像素）= 1 px, 然后之后的设备 dpi 成倍上升，控制屏幕，使其能较好控制真实的物理尺寸（例如触控范围），不受 ppi 的影响，在系统逻辑像素层，ppi 一直都是 72

px（渲染像素）

• 所谓渲染像素，即系统处理出来的原始画面的尺寸，即是系统基于 pt（逻辑像素）进行对应倍增而得的结果，这个结果并不一定会等同于实际像素
• iPhone 6 Plus 采用了 2208 乘以 1242 的逻辑像素，但却因为产能不足把 2208 乘以 1242 的画面塞到 1080P 的屏幕中，导致了 6 Plus 的渲染像素和实际像素不能一一匹配，画面被缩小而模糊
• iPhone 6 开启 Display Zoom 功能时，逻辑像素与 iPhone 5 相同，即 320 pt 乘以 568 pt，渲染像素进行 @2x 处理，但 iPhone 6 的物理像素为 750 乘以 1334，比此时的渲染像素要高，所以会将画面拉大显示而模糊
• iPhone 6 Plus 开启 Display Zoom 功能时，逻辑像素与 iPhone 6 相同，即 375 pt 乘以 667 pt，渲染像素进行 @3x 处理，但 iPhone 6 Plus 的物理像素为 1080 乘以 1920，比此时的渲染像素要低，所以会将画面缩小显示而模糊
• 由此可见，所谓 Display Zoom 技术就是在实际像素和渲染像素处理倍数不变的情况下，改变画面显示的逻辑像素（目前的规律是把逻辑像素向下一个级别），从而达到改变渲染像素的目的，渲染像素一旦被改变，画面就会以不同的大小显示，从而得到不同的视觉效果（目前的视觉效果即是：渲染像素变小，实际像素不变，画面被拉大，所以能显示更多的内容）

dp（设备无关像素）

• Android 把屏幕密度分为了四个广义的大小：ldpi 240 乘以 320 低 (120 dpi)，mdpi 320 乘以 480 中 (160 dpi)，hdpi 480 乘以 800 高 (240 dpi)，xhdpi 720 乘以 1280 超高 ( 320dpi )，其中 google 规定 160dpi 作为屏幕适配的基准（注意，这里的分辨率为每种广义大小的常见分辨率）
• 在 160dpi 的机器上 1 dp = 1 px，1 sp = 1 px（ Android 允许用户自定义文字尺寸（小，正常，大，超大），当尺存为（正常）时 1 sp = 1 dp = 0.00625 inch，而当文字尺寸是（大）或（超大）时，1 sp > 1 dp = 0.00625 inch，这也是 Google 建议使用sp 作为字体尺寸定义的原因，如果用 dp 控制字体，是不会跟随系统调整变化的）
• px / dp = dpi / 160（说白了，就是当物理像素密度 160 dpi 时，1 px = 1 dp，可推算出 320 dpi 时，2 px = 1 dp，以此类推）
• 由此可见，dp（设备无关像素）和 pt（逻辑像素）基本属于同一个玩意儿，dp（设备无关像素）基于 160 dpi 作为基准定位，pt（逻辑像素）基于 iPhone 3G 作为基准定位，iPhone 3G 也正是 160 dpi

rem（相对于根元素的字体大小）

• Html 的 font-size 可以等比改变所有用了 rem 单位的元素，通过一段 js 根据浏览器当前的分辨率改变 font-size 的值，不管在任何分辨率下，页面的排版都是按照等比例进行切换，并且布局没有乱
• 值得指出的是 em（相对于父元素的字体大小）已经不太需要了，1 em 就是父元素指定的字号大小
• PC 上默认的根元素 font-size 所有的浏览器都是 16 px