# 像素
像素是没有实际的物理尺寸的，但也是最终用来呈现视图的单位。
在同一个设备上，像素的个数、大小都是固定的（出厂时就决定，也叫 设备像素）。
只有在不同设备之间，才有像素大小的区别。
# 分辨率
分辨率（也叫像素尺寸）的单位 是 像素（即设备像素）。
1920 x 1080px，则代表在屏幕横向有1080个像素块，竖向有1920个像素块。
TIP
调整分辨率：只是把当前 有效的像素数 改变了。系统会通过算法，把无效的像素点填上。
- “设置”里推荐的分辨率，一般就是这个屏幕真实的像素个数。
如：推荐1366 x 768px，则代表这个屏幕在横向设置了1366个像素块，竖向设置了768个像素块。
- 如果调整至更低分辨率时，实际上呈现的是掺杂了“真实有效的像素块”和“系统模拟后填充的像素块”，可能会出现模糊。
# 像素和css像素的区别
css样式代码中使用的逻辑像素也叫 虚拟像素，单位是 px。
px 是个相对单位，相对的是设备像素
# DPR
每个 CSS像素 所对应的 物理设备像素 的数量。
DPR = 设备像素 / css像素
// 获取DPR
console.log(window.devicePixelRatio);
2
TIP
css设定：
div {
width: 2px;
height: 2px`;
}
2
3
4
- 那么在 DPR 为1时，就会用 2 x 2 个设备像素 去呈现
这个div； - 若 DPR 为2，则会用 2(x2) x 2(x2) 个像素，即 4 x 4 个设备像素 去呈现。
# 位图像素
位图像素，是栅格图像（如: .png、.jpg、.gif）的最小数据单元。
# Retina屏：屏幕尺寸没变，但分辨率提高了。
为什么Retina需要二倍图显示？
在Retina屏会出现 位图像素点 不够，从而导致了图片模糊。
TIP
一个位图像素（蓝色块#298fe2）需要用一个设备像素块，能完美清晰展示。
但是在Retina屏（DPR=2）上，需要用 4 个设备像素块，只能就近取色（因为位图像素不可分割），从而导致图片模糊。
解决方案：提供2倍图（DPR=3同理）
<img width="200px" height="300px" />需要提供 400 x 600px 作为2倍图的尺寸。
# 普通屏幕（DPR=1）是否用两倍图？
在普通屏幕上使用2倍图，会出现 1个设备像素对应4个位图像素（见上个例子），最终会通过一定算法取色。
不会模糊，但会出现色差（大部分可接受）
# 屏幕像素密度
PPI（也叫DPI），即每英寸屏幕（即，对角线上，1英寸的正方形内）所拥有的设备像素数。
一般会用来衡量屏幕的清晰程度
根据公式可以算出，在1920 x 1080px分辨率，且尺寸为5.2英寸下，像素密度为 424PPI。
对电脑屏幕而言，DPI和PPI是一个意思
TIP
为什么iphone比其它型号手机更清晰？
- iphone6：1920 x 1080px，5英寸，469PPI
- 荣耀7：1920 x 1080px，5.2英寸，424PPI
在相同的分辨率情况下，iphone6尺寸比 荣耀7 小，但PPI 比 荣耀7 高。
这里的尺寸指屏幕对角线的长度。
是因为iphone6在出厂时，早就在屏幕上设置了同样数量，但个数更小的像素块。