谈谈设备像素比dpr

• 屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸：
  iphone4 3.5英寸
  iphone5 4英寸
  iphone6 4.7英寸
  iphone6 plus 5.5英寸
  iphoneX 5.8英寸

• 像素：显示屏的画面上表示出来的最小单位。每个像素的大小是不固定的，他是根据设备的分辨率决定的

• 分辨率：屏幕分辨率是指纵横向上的像素点数，单位是 px

• 物理像素（physical pixel）：控制显示的最小单位。买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，一个点（小方格）为一个物理像素。它是屏幕能显示的最小粒度，常见屏幕分辨率：
  iphone4 640*960
  iphone5 640*1136
  iphone6 750*1334
  iphone6 plus1080*1920
  iphoneX 1125*2436

• 像素密度(pixel per inch)：即dpi或ppi，屏幕每英寸所占的物理像素点。

   PPI=像素数量/物理尺寸（英寸数）
  

  像素数量指的是一个维度的，比如X轴的像素数量，或Y轴的像素数量，或者对角线的像素数量。而不是总的像素数量。

  
  
  

  苹果区分手机屏幕是按照：非高清屏，高清屏（视网膜屏即retina屏）、超高清屏;常见屏幕ppi:
  Iphone4 326ppi
  Iphone5 326ppi
  Iphone6 326ppi
  Iphone6 plus 401ppi
  Iphone X:424ppi

• 逻辑像素 | 设备独立像素(density-independent pixel)：简称dip或dp， 设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

  
  

screen.width

• CSS像素：就是CSS里的px，上面已经讲了是viewport中的一个小方格。CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。

• 设备像素比(device pixel ratio) ：设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

  window.devicePixelRatio = 设备像素比 ＝ 物理像素 / 设备独立像素
  

  如：iPhone6的dpr为2，物理像素750（x轴）,则它 的逻辑像素为375。 也就是说，1个逻辑像素，在x轴和y轴方向，需要2个物理像素来显示，即：dpr=2时，表示1个CSS像素由4个物理像素点组成。如下图：
  

  

常见设备dpr:
Iphone5： 2
Iphone6 ：2
Iphone6 plus ：3
Iphone X： 3

问题1：为什么以iPhone6为标准的设计稿的尺寸是以750px宽度来设计的呢？

iPhone6的满屏宽度是375px（Viewport’s device-width (in CSS pixels)：375px），而iPhone6采用的视网膜屏的物理像素是满屏宽度的2倍，并且设计师所用的PS设计软件分辨率和像素关系是1:1。所以为了做出的清晰的页面，设计师一般给出750px的设计图，我们再根据需求对元素的尺寸设计和压缩。

问题2：1px 在高清屏上变粗了，为啥？

• 1px问题由于有retina屏的存在
• 设计稿一般做成满屏宽度的2倍
• 因此在dpr=2的retina屏下，会显示成2px
• 如果写成0.5px，在ios7和安卓，会把0.5px解读成0px
  解决方案：

方案一：
设置线条为1px，然后通过transform:scale(x,y)来缩放线条为原来的一半，可显示0.5px的线条。