响应式图片

img 标签在 HTML5.1 中新减少了 srcset 和 sizes 属性，能够用来实现图片的响应式

srcset

srcset 能够用来指定多张图像，能够用不同的描符来进行辨别

x

x用来形容不同的像素密度倍数，例如 1x, 2x, 3x, 写法为

    <img
      srcset="./nice/2.gif 3x, ./nice/1.jpg 2x, ./nice/1.gif"
      src="./nice/2.jpg"
    />

当像素比与所设的不匹配的时候，会进行向上匹配，即 2x 的没有预设，则会选用 3x 的，src属性会被标识为 1x，srcset中没有写 1x 也会标识为 1x。先匹配 srcset 中，再匹配 src 中的。

w

w用来形容图片资源的尺寸，此时的写法为

    <img
      srcset="./nice/1.jpg 1920w, ./nice/big.jpg 800w"
      sizes="(max-width: 700px) 500px, (max-width: 1280px) 700px"
      src="./nice/4.jpg"
    />

sizes 中的前半句为媒体查问，后半句为图片的显示宽度。显示宽度能够写 px 或者vw。浏览器首先依据媒体查问找到显示的图片大小，而后乘以设施像素比，去跟图片像素比拟，显示最靠近的

留神

sizes 独自存在有效