响应式图片

让一个网站达到在各种设备上都有良好的显示效果是一个很复杂的过程，这里总结一下响应式网站中图片如何适配的问题。

考虑图片的适配，会面临下面两个问题：

1. 不同设备的屏幕尺寸不同（我们往往分为三大类：PC、mobile和tablet），在这些设备上需要使用不同的图片

如下面这个网页，在web和mobile端的效果：

宽屏设备使用更宽的图片(图片来自MDN)

窄屏设备使用小图，展现更多细节

使用不同的图片能使得网站在web和pc上都有比较好的视觉效果，也能选择合适的尺寸，节省带宽。

2. 不同设备的像素比不同，比如iPhone新设备的视网膜屏，理应使用更清晰的图片达到更好的显示效果。

   image

像素比对图片的影响

在探讨像素比对图片的影响之前，我们先了解几个概念。

物理像素

设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt

随着技术的发展，设备的像素密度越来越大，之前iPhone3屏幕的分辨率是320 * 480。到了iPhone4这个数值变成了640 * 960。那么对于网页而言，iPhone4上的网页元素的长宽是否只是iPhone3的一半呢？显然并不是，所以我们还有另一个概念：设备独立像素。

设备独立像素 DIP(Device independent Pixel)

设备独立像素，也称为逻辑像素，简称dip。我们在写CSS时，10px、20px….这里的px指的是设备独立像素

对于iPhone4而言，它的物理像素尺寸增长了一倍，但逻辑像素还是 320 * 480。但这时一个逻辑像素点由四个物理像素点表示。

这里有一张图片来说明这种关系：

image

假设我们使用CSS规定一个元素的宽高均为1px，那么：

• 对于像素比为1的设备而言，它会用1 * 1的物理像素来显示这个元素
• 对于像素比为2的设备而言，它实际上会用 2 * 2的物理像素点来显示这个元素。

image

像素比devicePixelRatio

设备上物理像素和设备独立像素(device-independent pixels (dips))的比例

有了逻辑像素，我们似乎不用去管设备的物理像素了。那么对于图片而言，在像素比为2的设备上往往需要提供2倍图，才能保证清晰度，不然凑近看之后会有颗粒感。这里有一种方式是使用CSS的媒体查询。

使用媒体查询

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

上一个方法实现了用媒体查询根据设备像素比显示不同的背景图。下面则是一些方法直接在HTML上使用不同的图片：

使用srcset

例子1，根据像素比选择src

例子2：

1. 查看设备宽度
2. 检查sizes列表中哪个媒体条件是第一个为真
3. 查看给予该媒体查询的槽大小(280px/440px或者800px)
4. 加载srcset列表中引用的最接近所选的槽大小的图像

使用picture标签

HTML 元素是一个容器，用来为其内部特定的 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img) 元素提供多样的 [元素。浏览器会根据当前页面（即图片所在的盒子的容器）的布局以及当前浏览的设备（比如普通的屏幕和高清屏幕）去从中选择最合适的资源。

利用picture标签可以直接使用媒体查询：