移动开发那些像素之间的事
程序员文章站
2022-05-05 12:31:26
...
屏幕分辨率
- 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/[email protected]');
}
}
像素之间的关系
- 页面不缩放的情况下，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