最近正在做前端的 UI，本来以为会是一件很简单的事情，但一来二去也搞了整整一天。其中最让我郁闷的是在了 PS 设置画布尺寸的时候没有做充分的调查，理解错了同学口中的尺寸意义，导致 UI 画完了才发现尺寸整整小了一圈😂怎么办？重画呗～
因此记录一下，方便日后回顾。
物理尺寸#
英寸#
英寸 (inch) 是衡量设备尺寸的常用单位
它代表的是屏幕对角线的长度
一英寸≈2.54cm
分辨率#
像素#
像素是屏幕的最小单位，所有图片都是由无数个像素点构成。
像素应该是用来衡量尺寸的，像素点和尺寸成正比
屏幕分辨率#
分辨率即垂直和水平方向上的像素点数，例如
1080*1920
指具体设备的屏幕像素尺寸，一般我们所说的手机或者电脑等物理设备的分辨率的时候就是指屏幕分辨率
屏幕分辨率越高不代表屏幕越清晰，这还要取决设备的物理尺寸。换句话说，分辨率要和物理尺寸搭配才能体现清晰度，因为它直接能表现的是屏幕所能容纳的总的像素点数，如果设备物理尺寸不同，比较分辨率应该意义不大。当然这里的像素应该指的是物理像素，这点之后会提到。
这里要记住的是屏幕分辨率 / 设备独立像素 (逻辑像素) = 倍率（设备像素比）这个结果才能真正定义清晰度
图像分辨率#
即图片所含的像素点数，表示一张图片在垂直和水平方向上的像素点数
和屏幕分辨率的定义差不多，只不过一个是定义屏幕的一个是定义图片的。同一尺寸下分辩率越高，图片越清晰
PPI（Pixel per Inch）#
每英尺包含的像素点数，可以用来描述屏幕的清晰程度
PPI 越高，图片质量越清晰。
这里注意在设计的时候一般约定
手机屏幕使用 72PPI，海报使用 300PPI
据说 PPI 达到 300 以上，就会给人真实感，因此海报的 PPI 要达到这个数值，而手机屏幕如果PPI设置过大，会导致加载过慢，卡顿的现象，一般72PPI也够用了
PPI 的计算公式
DPI（Dot per Inch）
每英寸包括的点数。它可以是屏幕像素点、图片像素点也可以是打印机的墨点。
在描述图片和屏幕的时候可以认为 DPI 和 PPI 两者等价
在使用打印机的时候，由于打印机打印的点不是规则排列的，打印点之间会存在空隙，因此DPI也被称之为打印点的密度
打印机的 DPI 越高，打印图像的精细程度越高，同时墨点的耗费量和打印时间也越长
逻辑像素和物理像素#
以上我们看到的像素都是真实的像素，是物理像素
但是随着技术的发展出现了逻辑像素，即由多个物理像素组成一个逻辑像素。
这是由乔布斯在Iphone4的发布会上发布的视网膜屏幕（Retina Display）首次提出的
一个很直观的对比就是，由逻辑像素（假设一个逻辑像素由 3 个物理像素组成）组成的分辨率为 1080*1920 的图片，和一个由物理像素组成的分辨率为1080*1920的图片，在像素总量一定的前提下，前者的图片尺寸是后者的 3 倍，试想想如果把这个 3 倍的尺寸图片压缩到 1 倍的图片中，是不是清晰度骤然就提升了呢？
设备独立像素#
设备独立像素，指设备的原始尺寸，这里的像素是逻辑像素
打开chrome的开发者工具，我们可以模拟各个手机型号的显示情况，每种型号上面会显示一个尺寸，比如iPhone X显示的尺寸是375x812，实际iPhone X的分辨率会比这高很多，这里显示的就是设备独立像素。
设备像素比 DPR#
device pixel ratio简称DIP或DP, 指设备的物理像素和逻辑像素之比，也称之为倍数
开发问题#
移动端#
iOS的尺寸单位为pt，Android的尺寸单位为dp，React Native中没有指定明确的单位，它们其实都是设备独立像素dp(Device Pixel)。
WEB 端#
CSS 像素使用的是设备独立像素 (逻辑像素)
UI 准备图的时候根据屏幕的质量（2 倍屏或 3 倍屏）准备 2 倍和 3 倍的像素尺寸进行绘图
在写CSS时，我们用到最多的单位是px，即CSS像素，当页面缩放比例为100%时，一个 CSS 像素等于一个设备独立像素。
但是 CSS 像素是很容易被改变的，当用户对浏览器进行了放大，CSS 像素会被放大，这时一个 CSS 像素会跨越更多的物理像素。
页面的缩放系数 = CSS 像素 / 设备独立像素
屏幕问题#
我们常使用 P 和 K 衡量屏幕质量
P 代表的屏幕纵向的像素个数
1080P 即代表屏幕纵向有 1080 个像素
K 代表的屏幕横向的像素个数
K 代表屏幕横向有几个 1024 像素，像像素超过 4096 一般就称之为 4K 屏
参考文章：关于移动端适配，你必须要知道的