序言

      跟着网站开拓技术的成长，赏识器的进级，操纵体系的进级，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，后果十分好。