这是切图网qietu.com 一个shopify专题前端项目切图中遇到的，响应式设计，因为大图用到比较多，需要考虑手机加载情况，所以大图会单独做个小尺寸，然后采用电脑加载大图，手机加载小图的方式，主要考虑了srcset + sizes组合 和 picture两种方法，先使用了srcset ，但是代码较为复杂，需要写入每个图片的尺寸，相比之前 picture代码更为简洁，而且语法和响应式@media query的方式一致，可以和响应式代码更好的统一，最终选择了picture方式。

附代码片段：

<div class="inmoair3-img wow fadeIn">
<!--<img src="images/inmoair3-meet.png" srcset="images/inmoair3-meet@xs.png 704w, images/inmoair3-meet.png 1160w" sizes="704px" alt="" />-->

<picture>
<source media="(max-width: 1000px)" srcset="images/inmoair3-meet@xs.png">
<source srcset="images/inmoair3-meet.png"> <!-- 默认情况 -->
<img src="images/inmoair3-meet.png" alt=""> <!-- 兼容性兜底 -->
</picture>

</div>

切图网常年提供专业前端开发服务，始于2007年 从table布局到div到html5，对于w3c标准有独到的见解，好的页面代码利于后端嵌套，利于seo，加载速度快，有需要欢迎垂询。

标签：picture, shopify, srcset, 切图网, 响应式, 响应式设计