响应式图片

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独自存在有效