响应式加载资源

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

当匹配时用下面的设置。*/
type="image/webp"
srcset = "..."
sizes = "..."
>
srcset = "..."
sizes = "..."
>

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