响应式加载资源

<img class="image" src="mm-width-128px.jpg"

srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"

sizes="(max-width: 360px) 340px, 128px">

srcset 用来指向提供的图片资源，注意，仅仅是资源指向，没有以前的1x, 2x什么的（这个描述符还存在），这个都交给浏览器了，我们不需要关心！例如这里，指向了3个尺寸图片，分别实际尺寸128像素，256像素和512像素。

sizes 用来表示尺寸临界点，主要跟响应式布局打交道。语法如下： sizes="[media query] [length], [media query] [length] ... etc"，符合媒体查询的尺寸乘屏幕密度去选择图片

w 描述了前面图片资源的使用场景，就是图像原始宽度

有了 srcset 属性，就默认 width: 100%

获取当前src地址：HTMLMediaElement.currentSrc

<picture>

<source media="(max-width : 800px)"/*当匹配时用下面的设置。*/

type="image/webp"

srcset = "..."

sizes = "..."

>

<img src = "..."

srcset = "..."

sizes = "..."

>

</picture>

background-image: image-set(url(assets/test.png) 1x, url(assets/test-hires.png) 2x); // 根据像素密度进行选择