随着移动设备的普及，越来越多的不同尺寸的显示终端，让我们看到响应式网站的普及的光荣和迫切需要。但是响应式网站有一个必须解决的问题：如何回应网站中的图片。如果大图片与PC，平板电脑和手机相同，那就太不科学了。首先，手机流量过大，下载速度慢。其次，在大压缩后图像尺寸将变得模糊。

如果图片存在于背景模式中，则可以更好地解决，并且媒体查询可以用于为不同尺寸的显示终端设置不同的图片。但是，如果插入网页中的图像被解决，则会更复杂。

首先，使用srcset属性，代码如下

Srcset是基于媒体查询条件来显示不同的图像，与上面类似，表达式不一样，1x表示显示像素密度显示倍数。

通常，我是两者的组合。基本上支持主流浏览器的最新版本，但IE系列不支持它。这让我们感到很头疼。兼容性如下。

更严重的问题是QQ浏览器使用IE作为内核，微信浏览器不支持，而WeCin在中国的使用率非常高。此外，微信公众平台的微官网是客户的共同需求。最终的解决方案是使用Picturefill。很好。

二，使用图片元素，如下代码

　<picture alt="">

　　<source src="大图路径" alt="" media="(min-width: 640px)">

　　<source src="小图" alt="" media="(max-width: 639px)">

　　<img src="默认图片" alt="" alt="">

　　</picture>

在追逐响应式网站建设的浪潮中，我希望您不要忘记用户体验。只有当网站中的所有元素都能满足响应标准时才是真正的响应式网站。