前言

随着网站□□□开发技术•的发展，浏览器的□□升级，操作系统□□□的升级，HTML5\CSS3技术的推□□□□出，对HTML5的支持变□□得越来越◉全面，也让旧浏□□□□览器的占□□□有率越来□□□□越低，同时不同□□尺寸的显□□□□示终端越□□□□来越多，这些让我□□□们看到了□□□□响应式网□□站普及的□□□署光及迫□□切需求。但，今天要谈□□□□的是响应□□□式网站一◤个必须要□□解决的问□□□题：图片响应式，一张大图如果PC端是这么大、平板端是这么大、手机端还是这么大的话，实在太不科学了，一是手机流量占用过大，下载速度慢；其次就是图片大比例压缩后变得模糊。

背景图片●响应式解□□□□决办法

如果图片□□是以背景□□方式存在，这种比较□□□好解决，可以采用◉媒体查询，为不同尺□□□□寸的显示□□□终端设置□□不同图片。

图片响应□□□式解决方□□□□法

1、采用picture元素，如下代码

<picture alt="">

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

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

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

</picture>



这种方法□□□已经被很□□多网站使□□□□用



2、采用srcset属性，如下代码

<img src="默认图片" alt="" srcset="1倍大图 600w 200h 1x, 2倍大图 600w 200h 2x, 小图 200w 200h">

srcset里面是根□□据媒体查□□□□询条件显□□□示不同图□□片，跟上面差□□不多一样，表达方式·不一样，1x表示显示※器像素密度□□显示倍数。

正常我是□□两者结合□□□的方式实□□现，各大浏览·器最新的□□版本基本□□□都支持，但是IE系列的不□□□支持，这让我们□□□感到非常◣头痛，兼容性具♦体如下图。



比较严重□□□□的问题是QQ浏览器以IE为内核，微信浏览□□□器不支持，而微信在□□□□国内的使□□□□用率非常□□高，加之微信□□公众平台▲的微官网□□□是客户的□□□□常见需求,最后解决□□办法是使◈用Picturefill，效果非常□□□好。