目录
屏幕尺寸
屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸。
| 设备 | 屏幕尺寸 | 物理像素尺寸 | 逻辑像素尺寸 | 物理像素比 dpr |
|---|---|---|---|---|
| iPhone3g/3gs | 3.5英寸 | 320x480 | 320*480 | 1.0 |
| iPhone4/4s | 3.5英寸 | 640x960 | 320*480 | 2.0 |
| iPhone5/5s/5c | 4.0英寸 | 640x1136 | 320*568 | 2.0 |
| iPhone6/7/8 | 4.7英寸 | 750x1334 | 375*667 | 2.0 |
| iPhone6/7/8 Plus | 5.5英寸 | 1080x1920 | 414*736 | 3.0 |
像素
像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。电视的图像是由按一定间隔排列的亮度不同的像点构成的，形成像点的单位也就是像素，组成图像的最小单位就是像素。
分辨率
什么叫分辨率呢?
屏幕分辨率是指纵横向上的像素点数，单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。
分辨率又称显示分辨率或屏幕分辨率，它是指水平方向或垂直方向像素的数量。
iPhone6的分辨率和屏幕尺寸：
-
iPhone6的分辨率是750*1334
-
屏幕尺寸大小是4.7英寸
JS获取分辨路
-
通过
window.screen.width * window.devicePixelRatio后者window.screen.height * window.devicePixelRatio可以获取到分辨率
随着智能手机的发展，手机屏幕越来越清晰、越来越大，手机屏幕也越来越大，大的屏幕同时必须要配备高分辨率，也就是在这个尺寸下可以显示多少个像素，显示的像素越多，可以表现的余地自然越大。手机屏幕的尺寸没有变，但是物理分辨率却越来越大，比如 iPhone3GS(320x480)与iPhone4s(640*960)，屏幕大小却同为3.5英寸，但是分辨率却不一样，这就产生了逻辑分辨率。
设备物理分辨率
设备物理分辨率（device pixels, dp）也叫“设备像素”或者“物理像素”，指的是设备屏幕实际拥有的像素点，是真实存在的，单位用px表示（这个单位不是移动web开发中CSS的px）。
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所有iPhone 6 总共有750*1334个像素点。
一个手机生产出来，他们屏幕的像素就已经确定了，iPhone4的分辨率是640x960px，代表屏幕的宽是640px，高是960px。一个屏幕都是由一个一个像素组建而成的，每个像素都对应一个小点。我们常见的 640*960 像素就说明了一个屏幕中包含了多少个像素点。比如一个图片，细分最小单位就是像素，也就是说图片是由许多的像素点构成，手机中显示的任何图形和图像都是由这些像素点组成。
但是，一个手机屏幕的尺寸并不能代表里面有多少像素点，比如 iPhone3GS(320x480)与iPhone4s(640*960)，屏幕大小却同为3.5英寸，但是像素点却不一样。
从最初的颗粒感相当大的屏幕，到720p再到1080p，甚至于现在各家旗舰手机的2k屏幕，手机屏幕的物理分辨率变得原来越大。这样就暴露出来一个问题，我们如果手机分辨率翻倍，我们的图像不就要被缩小一倍，难道要在每个设备上就出个设计稿，每个设备的分辨不尽相同。其实你担忧的问题乔帮主在很多年前就想到了，这就是逻辑分辨率。
设备逻辑分辨率
设备逻辑分辨率也叫“设备独立像素”或者“逻辑像素”（Device Independent Pixel, DPI），可以理解为人对于物体真实尺寸的认知(屏幕大小)，单位pt。设计的时候使用逻辑像素来思考页面，可以理解为反映在CSS里的像素点。
逻辑像素也是为web开发者创造的，在CSS和JavaScript中使用。
以iPhone6为例：
-
750x1334 是物理分辨率或者物理像素。
-
375x667 是逻辑分辨率或者逻辑像素（这个尺寸也是移动web开发中所用的开发尺寸）。
虽然设备物理像素不同，但是逻辑像素却都差不多，这就要感谢乔帮主了。
乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念，在iPhone4使用的视网膜屏幕中，把2x2个像素当1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。从此以后高分辨率的设备，多了一个逻辑像素。这些设备逻辑像素的差别虽然不会跨度很大，但是仍然有点差别，于是便诞生了移动端页面需要适配这个问题，既然逻辑像素由物理像素得来，那他们就会有一个像素比值。
物理像素和逻辑像素之间存在着一定的对应关系，这个关系叫做设备像素比。
设备像素比
设备像素比（device pixel ratio：dpr）也叫物理像素比，是指1px能显示的物理像素点的个数，即物理像素和逻辑像素的比值：dpr=物理像素/逻辑像素。
为什么要知道设备像素比呢？因为这个像素比会产生一个非常经典的问题，1像素边框的问题及多倍图的问题。
比如：iPhone6手机的物理像素比就是2，它表示1px逻辑像素 = 2个物理像素。
设备像素比获取：
-
Javascript 通过
window.devicePixelRatio获取到当前设备的dpr。 -
CSS 通过
-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备继续样式适配。
设备像素比的意义:
设备像素比的意义：让同一张图片，在不同大小、不同分辨率的屏幕显示大小保持一致。
相同尺寸下，普通屏幕 VS Retina 屏，css像素所呈现的物理尺寸（大小）是一致的，不同的是一个css像素所对应的物理像素的个数不一致：
-
普通屏幕：css像素：物理像素 = 1:1；
-
retina屏： css像素：物理像素 = 1:4，即4个物理像素显示一个css像素；
如下图所示：
物理和逻辑像素的产生原因
其实在很久以前，的确是没区别的，CSS里写个1px，屏幕就给你渲染成1个实际的像素点，DPR=1，多么简单自然。后来苹果公司为其产品mac、iPhone以及iPad的屏幕配置了Retina高清屏，也就是说这种屏幕拥有的物理像素点数比非高清屏多4倍甚至更多。如果还按照DPR=1进行展示，那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4，这样的话由于图片在屏幕上的展示面积大大缩小，也会导致出现“看不清”的问题。
苹果公司既然推出了Retina技术，那么这种技术带来了高清展示福利的前提下也要解决“DPR=1”的问题。怎么解决呢？DPR!=1。苹果公司经过一系列技术使用4个乃至更多物理像素来渲染1个逻辑像素，这样一来，同样的CSS代码设置的尺寸，在Retina和非Retina屏幕上看起来大小是一样的，但在Retina屏幕上要精细得多。
在Retian屏上，DPR不再是1，而是大于1，比如2（iPhone 5 6 7 8）或3（iPhone 6 Plus等一系列Plus）或者为非整数（一些Android机），说不定还会涨。
举个例子，iPhone 6的物理像素上面已经说了，是750 * 1334，那它的逻辑像素呢？我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了，结果是 375 * 667，这就是它的逻辑像素，据此很容易计算出DRP为2。当然，我们还可以直接通过window.devicePixelRatio这个值来获取DRP，打印结果是2，符合我们的预期。
CSS像素
CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位是抽象的，而不是实际存在的。
CSS像素 = 设备独立像素 = 逻辑像素。
PC端网页像素
在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iPhone3，它的分辨率为320x480，在iPhone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iPhone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理，例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
移动端网页像素
在PC端页面，1px等于1个物理像素；但在移动端，1px不一定等于1个物理像素。
在移动web中CSS像素是按照逻辑像素计算的：
-
1css像素 ≠ 1物理像素
-
1css像素 = 1逻辑像素
比如iPhone6的设备像素(物理像素)为750x1334，逻辑像素为375x667
| 设备 | 屏幕尺寸 | 物理像素尺寸 | 逻辑像素尺寸 | 物理像素比 dpr |
|---|---|---|---|---|
| iPhone6/7/8 | 4.7英寸 | 750x1334 | 375*667 | 2.0 |
PC端 和 早前的手机屏幕: 1css像素 = 1物理像素：比如 iPhone3GS
| 设备 | 屏幕尺寸 | 物理像素尺寸 | 逻辑像素尺寸 | 物理像素比 dpr |
|---|---|---|---|---|
| iPhone3g/3gs | 3.5英寸 | 320x480 | 320*480 | 1.0 |
但是现在的手机都是2倍屏和3倍屏，所以移动端开发中不能再使用物理像素尺寸，而是使用逻辑像素尺寸。
移动web的设计
在手机端网页就没有统一设计标准，比较流行的做法是按照iPhone 6的尺寸来设计。倍率2，逻辑像素375x667。
这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。
如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414x736。
UI设计师和前端工程师之间的协同
-
一般由设计师按照设备像素(device pixel)为单位制作设计稿。
-
前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。
iPhone 6设计界面的具体尺寸是750px X 1334px，具体设计步骤如下：
1、视觉设计阶段，设计师按宽度750px（iPhone 6)做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。
2、输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。
3、开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。
4、适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。
总结 ：
逻辑像素比 按照物理像素比 来决定1逻辑像素比 等于多少物理像素比
例如：1逻辑像素比=2物理像素比/3逻辑像素比
在PC端页面，1px等于1个物理像素；但在移动端，1px不一定等于1个物理像素。
在移动web中CSS像素是按照逻辑像素计算的：
-
1css像素 ≠ 1物理像素
-
1css像素 = 1逻辑像素
设计师与工程师的协同问题：
设计师是按照宽度750px（以iphone6）做设计稿 做标注 工程师拿到图纸不能按照固定宽度来做
需要用其他单位来做比如百分比 vw em rem好方便后面的适配