作为前端，你应该了解的分辨率/逻辑像素/物理像素/retina屏知识🧐

在前端开发之前，设计师都会为前端开发者提供视觉稿/设计稿。 那我们怎么才能用代码还原设计稿并适配多种屏幕呢？ 首先需要了解一些设计上的概念！

描述显示器设备时, 我们常说的分辨率都是设备分辨率，设备分辨率又有以下别名

显示分辨率（屏幕分辨率）是指显示器能显示的像素有多少。 由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多。

--百度百科

比如：手机的分辨率就很高，因为手机屏幕很小，所以需要更高的分辨率才能让图像显示得更清晰

分辨率=画面水平方向的像素值 * 画面垂直方向的像素值

例如，一个屏幕分辨率是1024×768 =786432 ，也就是说

在PC端非 retina屏上,设备分辨率等于图像分辨率

分辨率的单位用 屏幕像素密度 来表示

屏幕像素密度，即每英寸屏幕所拥有的像素数，即在一个对角线长度为1英寸的正方形内所拥有的像素数

PPI: Pixels Per Inch(像素每英寸),该值越高，则屏幕越细腻。

PPI 适用于图像分辨率,图像分辨率决定了图像输出的质量，图像分辨率和图像尺寸(高宽)的值一起决定了文件的大小，且该值越大图形文件所占用的磁盘空间也就越多 PPI数值越高，代表显示屏能够以越高的密度显示图像，画面的细节就会越丰富。

DPI: Dots Per Inch(点每英寸),该值越高，则图片越细腻。

适用于设备分辨率， 设备分辨率指的是各类输出设备每英寸上可产生的点数，如显示器、打印机、绘图仪的分辨率。

PPI/DPI：用在图片上。因为图片既可以在屏幕上显示，又可以印刷到纸上

DPI/PPI经常都会出现混用现象。但是他们所用的领域也存在区别。从技术角度说，

屏幕分辨率是3840×2160， 屏幕尺寸是27英寸，可得 该显示器的屏幕像素密度是163 PPI(屏幕上每英寸有163个像素)

询问别人一粒像素有多大是不严谨的问题，像素在脱离了屏幕尺寸之后是没有大小可言的:

右图中的像素跟左边的原始图像是一样，我们将DPI值从72提高到了300，效果是每英寸现在有更多的点，但是由于构成图像的总像素数没有变化，所以数学上表现的是图像变小，构成图像的每个像素变得更小

以简化的图像表达就是：

左边是原始图像，右边图减小了DPI的值，同时保持相同的物理大小，这就意味着每英寸的点数变少，同时每个像素都变大，图像变模糊。

以简化的图像表达就是：

相同的物理尺寸，较低的分辨率表现为DPI更小

因为在固定屏幕的情况下，提高屏幕分辨率（如下图），图像和文字显示目标会相应缩小，原因是系统并不会自动根据屏幕尺寸和分辨率关系相应的调整文字和图标的大小，这是Windows系统自身的行为。

同样尺寸，较低的分辨率，文字较大

同样尺寸，较高的分辨率，文字更小

同样尺寸，提高分辨率，导致DPI 更大了，因此图像文字显示更清晰了！但是图像和文字却缩小了！

这就是老年手机或电脑的设备物理分辨率都较低的原因, 因为这样文字和图标才会比较大

用在ps(平面设计)中,如海报，喷绘广告等

因为PPI的大小关系了ps中设计稿的文件大小和显示效果。前面也说到了, PPI 越高，则屏幕越细腻，图像越清晰。在图像处理中选择合适的设备分辨率值和图像分辨率值，既能保证图像质量，又能减少文件大小

移动端设计稿中,PPI 决定了retina屏 移动端设计稿应该出几倍图-在移动端适配中讲到

显示器分辨率是指 显示器能显示的像素多少，可显示的像素越多，画面就越精细。

一般通过PPI(每英寸能显示多少像素)，DPI(每一点能显示多少像素)来衡量，PPI/DPI越大，画面越精细。

逻辑像素有很多别名

浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px，px是一个相对单位，相对的是设备物理像素(device pixel)，其相对性体现在在同一个设备上或在不同设备之间每1个px所代表的物理像素是可以变化的

CSS像素的单位是PX(CSS pixels), 在浏览器中可以通过 screen.width ,screen.height 获取浏览器的逻辑像素

这就可以解释,前端界面适配的时候为什么需要知道设备物理分辨率？

iphone3的分辨率是320*480。 但是从iphone4开始，苹果公司推出了所谓的 retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍

其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门。

假设我们用PC浏览器打开一个页面，浏览器此时的宽度为800px，页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。

但如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。

但此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍.

也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。 从上面的例子可以看出，CSS像素从来都只是一个相对值。

由于同一个设备上或在不同设备之间 1px 所代表的物理像素是可以变化的。

CSS像素为1px宽的直线，对应的物理像素是不同的，可能是2px或者3px。而设计师想要的1px宽的直线,其实就是1物理像素宽。而设计师要的实际1px的边框就是下面这种情况：

详情可以参考 解决移动端1px边框问题的几种方法

物理像素别名

设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

设备屏幕实际拥有的像素点，屏幕的基本单元，是有实体的。

比如iPhone 6的屏幕在宽度方向有750个物理像素点，高度方向有1334个物理像素点，所以iPhone 6 总共有750*1334个物理像素点。

所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，

可以发现，在同样的大小下，2dpr的屏幕时普通屏幕像素点的4倍，3dpr的屏幕时普通屏幕像素点的9倍。这就是retina屏幕

设备像素比（dpr 描述的是未缩放状态下，物理像素和CSS像素的初始比例关系)

设备像素比(dpr) 是指开发中1个css像素占用多少设备像素，如2代表1个css像素用2x2个设备像素来绘制。

其实在很久以前，CSS的1px，屏幕就渲染成1个实际的物理像素点，即 DPR=1。 但从iPhone4开始， 苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina高清屏，在Retian屏上，即 DPR===2

那CSS的1px到底等于几个物理像素呢？

在某些浏览器中，window.devicePixelRatio 可以获得此比例,即 devicePixelRatio = 设备物理像素 / 逻辑像素。

但是要注意的是，window.devicePixelRatio 在不同的浏览器中还存在些许的兼容性问题

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而

在正常阅读距离下，人眼无法分 辨屏幕上的像素颗粒，使得屏幕显示效果更为细腻平滑

从iPhone4开始， 苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina屏幕。

iphone3的分辨率是320*480。 但是从iphone4开始，苹果公司推出了所谓的 Retina屏，分辨率提高了一倍，变成640*960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍

非retina屏与retina屏显示效果对比

非r屏与r屏在显示字母a的左上角边沿时的细节对比

两块面积相同而PPI不同的屏幕，自然是PPI大的那块总像素数量多(见上文的PPI解释)，其展示细节的潜力和能力也越大，只用4x4个像素来表达一条曲线，自然不如8x8个像素更加细腻平滑。后者的PPI是前者的2倍，后者像素数量则是前者的4倍。

根据windows的PPI计算规则， 分辨率提升了，那么图标和文字尺寸就会变小。

但是Mac的操作系统不同，它自动采取相应的模式（Mac下的HiDPI）进行适配，将缩小后的字体（苹果一直采用矢量字体）和图标重新放大，这样苹果用了更多的像素数来显示同样的内容，所以显示尺寸仍然不变。

pt和px的关系就是—— 1pt 里面有几个像素点。（比如 1pt里面有1个px，也可以有2个，3个，分别对应上图的@1x-一倍图,@2x-二倍图,@3x-三倍图）

还是拿iPhone6举例，下图 px 宽高是375*667，pt 宽高是750*1334，即 pt的宽高是px的2倍。

移动端开发时， 设计师以iPhone6(750px*1344) 为模板进行设计的，这是是物理像素。但是前端开发者以逻辑像素为准，所以开发时需要将 单位除以2

如下图iPhone6看到的宽高375*667，这个就是逻辑像素

比如你需要一个30pt*30pt的图标，那么这时你就需要跟设计师要三个文件：

这样把这三张图片导入进工程，你会神奇地发现，这三个文件居然会被iOS和Android 统一识别为sample.png，用的时候只需要引入 "sample.png" 就行了。

那么讲一下应用场景。

使用media查询判断不同的设备像素比来显示不同精度的图片 只适用于背景图

或者

使用img标签的srcset属性，浏览器会自动根据像素密度匹配最佳显示图片：