1️⃣ 常用设备尺寸

链接：http://shijuechuanda.com/screen/index.htm

1️⃣ 像素关系

2️⃣ 物理像素 / 设备像素

设备像素 / 物理像素是一个长度单位。 1 物理像素对应显示设备中一个微小的物理部件。
设备像素是手机屏幕的一个参数，由手机制造商决定。例如 IPhone 6 的物理像素为 750 * 1334

2️⃣ 设备独立像素 / 设备无关像素

设备独立像素，简称 DIP（device-independent pixel）,又称为设备无关像素，是一个长度计量单位。
设备独立像素也是手机屏幕的一个参数，由手机制造商决定。例如IPhone 6 的设备独立像素为 375 * 667
设备独立像素的出现，使得即使在高分辨率的屏幕下，也可以正常尺寸的显示元素，代码不受到设备的影响。

2️⃣ CSS 像素 / 逻辑像素

CSS 像素是 CSS 语言中用来表示长度的一个单位，单位为 px。
CSS 像素不能直接跟现实中的长度单位换算
CSS 像素主要用在 CSS 与 JS 中控制元素的大小与位置

2️⃣ 位图像素 - 位图和矢量图

位图图像亦称为点阵图像或栅格图像，是由单个的像素点组成的。放大后会失真。
矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。放大后不会失真。软件有Adobe Illustrator，Sketch
位图像素也是一个长度单位。位图像素是栅格图像（如：png，jpg，gif等）最小的数据单元。

1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示

2️⃣ 像素之间的关系

页面不缩放的情况下，CSS 像素 == 独立设备像素 == 逻辑像素 == DIP == 位图像素
在一个标准的显示密度下(普通屏)，一个 CSS 像素对应着一个设备像素，高清屏幕下一个 CSS 像素 等于 N 个物理像素

2️⃣ 像素比 / N倍屏

像素比（DPR dpr）： 单一方向上设备物理像素和设备独立像素的比例。

  1.   1. 像素比 = 物理像素 / 设备独立像素
  1. window.devicePixelRatio // JS 获取设备像素比

像素比的作用：程序可以根据像素比来显示不同的图片，达到清晰显示网页的效果。

  1. // 并非所有图片都需要根据屏幕的大小重新切换图片,只有主要的图片需要根据屏幕的变化重新切换图片
  2. // 2 倍屏幕
  3. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  4.     .logo {
  5.         background-image: url('./image/logo@2x.png');
  6.     }
  7. }
  8. // 3 倍屏幕
  9. @media screen and (-webkit-min-device-pixel-ratio: 3) {
  10.     .logo {
  11.         background-image: url('./image/logo@3x.png');
  12.     }
  13. }