-webkit新属性 image-set和srcset

响应式图片的作用：

          为使用不同分辨率的不同浏览器用户提供适合其浏览环境的图片大小的解决方案。

之前的解决方法是使用@media

但是-webkit新提出的image-set和srcset同样可以解决问题。

image-set用于CSS背景图:

{background-image:url(image1.png);
background-image:-webkit-image-set(
url(image1.png) 1x,
url(image2.png) 2x);
background-repeat:no-repeat;
}

对于不能识别image-set的使用默认的写法:

background-image:url(image1.png);

可以识别的但是非retina屏的使用:

background-image:-webkit-image-set(
url(image1.png) 1x

可以识别 而且是retina屏的使用:

background-image:-webkit-image-set(
url(image2.png) 2x

srcset同区别：

标签是为了能用更灵活的和熟悉的语法，去解决一些问题。

标签在source元素中可以使用media属性，和video标签类似。这使我们能够针对图像源做一些组合：viewport的高度和宽度，以像素或em为单位，使用min或max值，就和我们使用CSS　media查询一样。

    icon_tq_02.png" media="(min-width:40em)">
    icon_tq_02.png">

标签中也可以使用srcset属性：

icon_tq_02.png" srcset="icon_tq_02.png 1x,icon_tq_03.png 2x" media="(min-width:40em)">

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/10740682.html