物理像素、逻辑像素和像素密度，移动开发的@3X、@2X图片

物理像素/设备像素 DP

设备像素是物理概念，指的是设备屏幕实际拥有的像素点.

比如一般手机的分辨率为 2340X1080，那么水平方向上有 1080 个像素点，竖直方向上有 2340 个像素点。

逻辑像素/CSS 像素/设备独立像素 DIP

逻辑像素是我们进行 CSS 样式设计时的一种抽象单位，它可以自动在不同设备之间调节

在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。

px 是一个相对单位，相对的是设备像素(device pixel)。

为了抹去高密度分辨率屏幕(高清屏)所带来的适配问题，iOS 与 Android 两个平台分别提出了 pt（point）与 dp(device-independent pixel)两个单位。

他们的名称不一样，但是内涵是一样的。

以 iPhone 5 为例：

逻辑像素设定为 320x568pt（实际像素:640x1136px）,以物理屏幕左上角为原点，横向 X 轴 320pt,纵向 Y 轴 480pt。

所以 PPI 越高，1pt 的所覆盖的物理像素就越多。如果不是很理解逻辑像素的概念，就等同于 CSS 像素即可。

位图像素

一般我们在页面上使用的图片都是位图，位图像素是位图最小单位，不可再拆分。位图像素是图片本身的特性，在图片产出时就已经确定了，和 CSS 像素以及设备像素没有任何关系。

像素密度 PPI

PPI（pixels per inch）指的是屏幕分辨率的单位，表示的是每英寸（2.54 厘米）显示的像素密度。

屏幕的 PPI 值越高，那么这个屏幕每英寸能容纳的像素颗粒也就越多，那这个产品的画面的细节度也就越丰富。

PPI 值大于 300 一般我们就无法用肉眼察觉出屏幕上的「马赛克」格子了。

$$PPI=\frac{\sqrt{横向^2 + 纵向^2}}{屏幕尺寸}$$

设备像素比 DPR (Device Pixel Ratio)

$$DPR=\frac{物理像素}{逻辑像素}$$

移动开发中的@3X、@2X 图片

在开发中，如果使用正常的图片，在移动端展示时可能会出现图片模糊的效果。

像素是显示的最小单位，不可拆分；由于设备像素比的原因，CSS 的 1px 或位图的 1px 不一定等于物理像素的 1px。

解决方法：使位图像素和设备像素的数目接近

造成图片模糊的原因是位图的像素总数和对应的物理像素个数不一致，那么只需要增加图片的位图像素数目，使其接近于设备物理像素就解决了这个问题。

要想完美的适配多种设备，就需要针对不同设备采用 @2x 或者 @3x 的图片，使图片的位图像素和设备位图像素的数目接近于 1:1，就能使图片清晰显示不模糊。

• 方法一：媒体查询

/*默认大小*/
.photo {
  background-image: url(image.png);
}
/* 如果设备像素大于等于2，则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min--moz-device-pixel-ratio: 2) {
  .photo {
    background-image: url(image@2x.png);
    background-size: 100px 100px;
  }
}
/* 如果设备像素大于等于3，则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
  screen and (min--moz-device-pixel-ratio: 3) {
  .photo {
    background-image: url(image@3x.png);
    background-size: 100px 100px;
  }
}

• 方法二：使用 img 标签的 srcset 属性

<img
  width="100"
  height="100"
  src="image100.png"
  srcset="image@2X.png 2x, image@3X.png 3x"
/>

• 方法三：css 属性 image-set (其实和方法二一样)

background-image: image-set(
  url(../images/pic-1.jpg) 1x,
  url(../images/pic-2.jpg) 2x,
  url(../images/pic-3.jpg) 600dpi
);

img 的 srcset 属性