html5已引入picture标签,可以根据屏幕分辨率,让浏览器自己选择加载什么图片。
兼容性:
用法:
<picture>
<!-- 屏幕尺寸小于768px下 -->
<img srcset="1.png" media="(max-width:768px)" />
<!-- 屏幕尺寸大于1200px -->
<img srcset="2.png" media="(min-width:1200px)" />
<!-- 默认图片,这里可以理解为是768~1200之间的尺寸时加载的图片 -->
<img srcset="default.png" alt="default" />
</picture>