移动开发那些像素之间的事

屏幕分辨率

• 1080P 的分辨率是1920x1080 720P 1280 * 720
• 2K 屏幕是单一方向分辨率具有约 2000 像素的显示设备。最标准的 2K 分辨率为 2048×1024
  | 型号 | 分辨率 |
  | ---------------- | ----------- |
  | IPhone 3GS | 320 * 480 |
  | IPhone 4 / 4s | 640 * 960 |
  | IPhone 5 / 5s | 640 * 1136 |
  | IPhone 6 / 7 / 8 | 750 * 1334 |
  | 华为 P30 | 1080 * 2340 |
  | IPhone X | 1125 * 2436 |

物理像素 / 设备像素

设备像素 / 物理像素是一个长度单位。 1 物理像素对应显示设备中一个微小的物理部件。

设备像素是手机屏幕的一个参数，由手机制造商决定。例如 IPhone 6 的物理像素为 750 * 1334

设备独立像素 / 设备无关像素

设备独立像素也是手机屏幕的一个参数，由手机制造商决定。例如IPhone 6 的设备独立像素为 375 * 667

• 普通屏幕下 1 设备独立像素 等于 1 物理像素
• 高清屏幕下 1 设备独立像素 等于 N 物理像素

CSS 像素 / 逻辑像素

CSS 像素是 CSS 语言中用来表示长度的一个单位，单位为 px。
1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示

像素比 / N倍屏

	window.devicePixelRatio

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

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .logo {
        background-image: url('./image/logo@2x.png');
    }
}

像素之间的关系

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

型号	设备像素总和	设备独立像素总和	像素比（N倍屏）
IPhone 3GS	320 * 480	320 * 480	1（1px=1物理设备像素=1物理像素）
IPhone 4 / 4s	640 * 960	320 * 480	2（2px=1物理设备像素=2物理像素）
IPhone 5 / 5s	640 * 1136	320 * 568	2（2px=1物理设备像素=2物理像素）
IPhone 6 / 7 / 8	750 * 1334	375 * 667	2（2px=1物理设备像素=2物理像素）
HUAWEI P10	1080 x 1920	360 x 640	3（3px=1物理设备像素=3物理像素）
IPhone X	1125 * 2436	375 * 812	3（3px=1物理设备像素=3物理像素）

iphone 6 的参数必须要记住

设备像素 750 * 1334
设备独立像素 375 * 667
ppi 326