随着移动设备的普及，各种尺寸的显示终端越来越多。 这些都显示了响应型网站普及的曙光和迫切需求。 但是，响应式网站必须解决的一个问题是如何将网站中的图像转换为响应式。 如果大图PC端、平板电脑端、手机端大小一样，那就不科学了。 一是手机流量太大，下载速度慢。 其次，如果图像大小较大，压缩后会模糊。

如果图像作为背景存在，则更容易解决，因此可以使用媒体查询在不同大小的显示终端上设置不同的图像。 但是，如果是插入到网页中的图像，解决起来要复杂一些。

一.采用srcset属性，代码为

img src=&amp； #039； 默认图像&amp； #039； alt=&amp； #039； &amp； #039； srcset=&amp； #039； 1倍大图600w 200h 1x、2倍大图600w 200h 2x、小图200w 200h&amp； #039；

srcset中根据媒体查询的条件显示不同的图像。 和上述几乎一样，表现方法不同。 1x表示显示器像素密度的显示倍数。

通常，我是将两者组合起来实现的。 每个浏览器的最新版本都基本得到支持，但是没有IE系列的支持，我们感到非常头痛。 兼容性具体如下图所示。

严重的问题是，QQ浏览器以IE为核心，微信浏览器不支持，但微信在国内的使用率非常高，而微信公共平台的微官网是客户的普遍需求

二.采用picture元素，如下代码

picture alt=&amp； #039； &amp； #039；

source src=&amp； #039； 大地图路径&amp； #039； alt=&amp； #039； &amp； #039； media=&amp； #039； ( min-width: 640px ) &amp； #039；

source src=&amp； #039； 缩略图&amp； #039； alt=&amp； #039； &amp； #039； media=&amp； #039； ( max-width: 639px ) &amp； #039；

img src=&amp； #039； 默认图像&amp； #039； alt=&amp； #039； &amp； #039； alt=&amp； #039； &amp； #039； &amp； #039；

/picture

希望在响应型网站建设的浪潮中，不要忘记用户体验。 网站中的所有要素都满足应答型标准，才是真正的应答型网站。

详情请访问云服务器、域名注册、虚拟主机的问题，请访问西部数码代理商官方网站： zhuji.chenqinet.cn