bladedragon: " 最近正在做前端的UI，本来以为会是一件很简单的事情，但一来二去也搞了整整一天。其中最让我郁闷的是在了PS设置画布尺寸"

最近正在做前端的UI，本来以为会是一件很简单的事情，但一来二去也搞了整整一天。其中最让我郁闷的是在了PS设置画布尺寸的时候没有做充分的调查，理解错了同学口中的尺寸意义，导致UI画完了才发现尺寸整整小了一圈😂怎么办？重画呗~
因此记录一下，方便日后回顾。

物理尺寸

英寸

英寸(inch)是衡量设备尺寸的常用单位

它代表的是屏幕对角线的长度

一英寸≈2.54cm

分辨率

像素

像素是屏幕的最小单位，所有图片都是由无数个像素点构成。

像素应该是用来衡量尺寸的，像素点和尺寸成正比

屏幕分辨率

分辨率即垂直和水平方向上的像素点数,例如1080*1920

指具体设备的屏幕像素尺寸，一般我们所说的手机或者电脑等物理设备的分辨率的时候就是指屏幕分辨率

屏幕分辨率越高不代表屏幕越清晰，这还要取决设备的物理尺寸。换句话说，分辨率要和物理尺寸搭配才能体现清晰度，因为它直接能表现的是屏幕所能容纳的总的像素点数，如果设备物理尺寸不同，比较分辨率应该意义不大。当然这里的像素应该指的是物理像素，这点之后会提到。

这里要记住的是屏幕分辨率/设备独立像素(逻辑像素) = 倍率（设备像素比）这个结果才能真正定义清晰度

图像分辨率

即图片所含的像素点数，表示一张图片在垂直和水平方向上的像素点数

和屏幕分辨率的定义差不多，只不过一个是定义屏幕的一个是定义图片的。同一尺寸下分辩率越高，图片越清晰

PPI（Pixel per Inch）

每英尺包含的像素点数，可以用来描述屏幕的清晰程度

PPI越高，图片质量越清晰。

这里注意在设计的时候一般约定

手机屏幕使用72PPI，海报使用300PPI

据说PPI达到300以上，就会给人真实感，因此海报的PPI要达到这个数值，而手机屏幕如果PPI设置过大，会导致加载过慢，卡顿的现象，一般72PPI也够用了

PPI的计算公式

equation

DPI（Dot per Inch）

每英寸包括的点数。它可以是屏幕像素点、图片像素点也可以是打印机的墨点。

在描述图片和屏幕的时候可以认为DPI和PPI两者等价

在使用打印机的时候，由于打印机打印的点不是规则排列的，打印点之间会存在空隙，因此DPI也被称之为打印点的密度

打印机的DPI越高，打印图像的精细程度越高，同时墨点的耗费量和打印时间也越长

逻辑像素和物理像素

以上我们看到的像素都是真实的像素，是物理像素

但是随着技术的发展出现了逻辑像素，即由多个物理像素组成一个逻辑像素。

这是由乔布斯在Iphone4的发布会上发布的视网膜屏幕（Retina Display）首次提出的

一个很直观的对比就是，由逻辑像素（假设一个逻辑像素由3个物理像素组成）组成的分辨率为1080*1920的图片，和一个由物理像素组成的分辨率为1080*1920的图片，在像素总量一定的前提下，前者的图片尺寸是后者的3倍，试想想如果把这个3倍的尺寸图片压缩到1倍的图片中，是不是清晰度骤然就提升了呢？