容易混淆的名词。
基本概念
物理像素：在同一个设备上，物理像素是固定的，这是设备硬件属性规定的，一个设备的分辨率是固定的。
逻辑像素：我们网站开发使用的 CSS 像素，使用的是逻辑像素（也叫做设备无关像素）。如果一个设备，物理像素和逻辑像素相等，则不会产生任何问题，但在一个 2 倍屏（或 3 倍屏）中，需要使用 4 个物理像素来显示一个 CSS 像素。
像素比：物理像素与逻辑像素之间的比例，当像素比为 2:1 时，使用 4 个物理像素显示 1 个逻辑像素。在 JS 中可以通过 window.devicePixelRatio 得到，在 CSS 中也可以通过媒体查询进行匹配。
两倍图
开发中针对 Retina 屏时，有时候需要考虑用 2 倍图（或 3 倍图）的原因到底是什么呢？
假设如果你有一个 100x100 物理像素的图片大小，使用一个大小相同的 img 标签承载，那么在一倍屏下是保真显示的，但在 2 倍屏下，CSS 逻辑像素的 100x100 实际占用的设备像素是 200x200，这时候原本 100x100 的图片就被放大显示了，看上去就会模糊，这时候就需要使用到 2 倍图
代码层面
前面提到 window.devicePixelRatio 可以拿到像素比。其实我们通过调整浏览器的缩放，会修改这个值。
CSS 代码层面可以通过媒体查询，具体如下
#element {
background-image: url('hires.png');
}
@media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url('hires@2x.png'); }
}
@media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url('hires@3x.png'); }
}
2K 4K 1080P
常说的 2K、4K 屏，1080P 又是啥呢
- 几 P 的定义：P 是逐行扫描，几 P 就是指纵向有多少像素
- 几 K 的定义：横向大约有几个 1000 列像素，1K 就是 1000，2K 就是 2000
在电视领域，几 K 都被加上了一个固定分辨率标准，比如 1080P 是 1920x1080，4K 是 3840x2160
具体看知乎的吧，挺热闹的：「1080p」和「2k、4k」的关系与差别在哪里？