Edge浏览器支持响应式图片

微软曾表示将通过Edge浏览器为用户带来超乎以往的网页浏览体验，因此微软将以更开放的姿态来帮助开发者创造这种新体验。微软表示Edge浏览器已经加入了对HTML语言中img标签的“Srcset属性”支持，这将帮助开发者实现针对不同设备的图片显示自适应功能，为全面支持响应式图片铺路。

此前，采用Webkit内核的浏览器已经率先支持“Srcset属性”。

今日（06.09）微软在其官方博客中介绍，Win10 Edge浏览器已开始支持Srcset属性，这是Windows10 Edge浏览器为全面支持响应式图片设计迈出的第一步。Srcset属性是img标签的一个属性，允许开发者为不同尺寸的屏幕匹配最合适的图片。在此之前，WebKit内核浏览器已经内建了对Srcset属性的支持，对于开发者来说这是一项非常实用的功能。

什么是响应式图片？
响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片

CSS3 响应式图片

对于很多 IOS 开发者来说可能已经不太陌生了，为了适配 Retina 屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」，例如：

.mod .hd h3 {
    background-image:url(http://www.tudoupe.com/dataimg/allimg/150609/09135QG1-1.png);/* 普通屏幕 */
}

/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
       only screen and (min-resolution: 240dpi), /* 标准 */
       only screen and (min-resolution: 2dppx) /* 标准 */
{
.mod .hd h3{
    background-image:url(http://www.tudoupe.com/dataimg/allimg/150609/09135UU2-2.png);
    background-size: 105px 155px;
}
}

两张图片的对比效果：

以上Edge浏览器支持响应式图片内容出自土豆PE，感谢浏览~！