响应式图片——

通过 srcset 切换分辨率
假设一张图片有三种分辨率的版本，一张小的针对小屏幕，一个中等的针对中等屏幕，还有一个比较大的针对所有其他屏幕。要让浏览器知道这三个版本，怎么办呢？看代码：

<img src="scones_small.jpg" srcset="scones_medium.jpg 1.5x, scones_
large.jpg 2x" alt="Scones taste amazing">

这是实现响应式图片的最简单语法，我们必须把它完全搞明白。
首先， src属性是大家已经熟悉的，它在这里有两个角色。一是指定1倍大小的小图片，二是在不支持srcset属性的浏览器中用作后备。正因为如此，我们才给它指定了最小的图片，好让旧版本的浏览器以最快的速度取得它。
对于支持srcset属性的浏览器，通过逗号分隔的图片描述，让浏览器自己决定选择哪一个。图片描述首先是图片名（如scones_medium.jpg），然后是一个分辨率说明。本例中用的是1.5x和
2x，其中的数字可以是任意整数，比如3x或4x都可以（如果你的用户可能使用那么高分辨率的屏幕）。不过有个问题。 1440像素宽、 1x的屏幕会拿到跟480像素宽、 3x的屏幕相同的图片。

---

在响应式设计中，经常可以看到小屏幕中全屏显示，而在大屏幕上只显示一半宽的图片。要把我们的意图告诉浏览器，怎么办呢？看代码：

<img srcset="scones-small.jpg 450w, scones-medium.jpg 900w"
sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw" src="sconessmall.
jpg" alt="Scones">

这里照样使用了srcset属性。 不过，这一次在指定图片描述时，我们添加了以w为后缀的值。
这个值的意思是告诉浏览器图片有多宽。这里表示图片分别是450像素宽（ scones-small.jpg）和900像素宽（ scones-medium.jpg）。但这里以w为后缀的值并不是“真实”大小，它只是对浏览器的一个提示，大致等于图片的“CSS像素”大小。使用w后缀的值对引入sizes属性非常重要。通过后者可以把意图传达给浏览器。

sizes属性的第二个值，意思其实是“嘿，浏览器，如果设备宽度大于等于40em，我只想让对应的图片显示为50vw宽”。我们用DPI（或表示Device Pixel Ratio的DPR，即设备像素比）来解释就明白了。比如，如果设备宽度是320像素，而分辨率为2x（实际宽度是640像素），那浏览器可能会选择900像素宽的图片，因为对当前屏幕宽度而言，它是第一个符合要求的足够大的图片。

---

picture 元素

最后一种情况就是你希望为不同的视口提供不同的图片。比如第1章的例子，在最小的屏幕
上，我们希望显示上面涂了果酱和奶油的松饼。在大一点的屏幕上，我们希望显示更大一点的图
片，也许是一张摆满各式蛋糕的桌子的照片。最后，对于非常大的屏幕，我们希望用户看到一张
乡村街道旁的蛋糕店的外景，门外有客人坐在那里吃蛋糕、喝茶（有点像我向往的世外桃源）。
这样就需要有三张图片，而且要用picture元素：

<picture>
<source media="(min-width: 30em)" srcset="cake-table.jpg">
<source media="(min-width: 60em)" srcset="cake-shop.jpg">
<img src="scones.jpg" alt="One way or another, you WILL get
cake.">
</picture>

首先，要知道picture元素只是一个容器，为我们给其中的img元素指定图片提供便利。假如你想为图片添加样式，那目标应该是它内部的那个img。
其次，这里的srcset属性的用途跟前面例子中的一样。
再次，这里的img标签是浏览器不支持picture元素，或者支持picture但没有合适媒体定义时的后备。敬告各位，千万别省略picture中的img标签，否则后果可能不堪设想。
这里最不同的是source标签。在这个标签里，可以使用媒体查询表达式明确告诉浏览器在什么条件下使用什么图片。