不同设备（不同分辨率）加载不同的图片样式-HTML代码

在Html5中实现不同手机/电脑设备或者不同分辨率加载显示不同大小的图片

实例演示

我们这里先用图片试验，可以在电脑或者手机分别打开此页，查看图片变化

推荐尺寸

• 电脑设备尺寸-推荐：1500x141px

• 手机设备尺寸-推荐：900x268px

HTML代码

<picture>

<!--↓↓↓电脑设备尺寸-推荐：1500x141px↓↓↓-->
<source media="(min-width: 45em)" srcset="电脑设备图片地址" width="100%">

<!--↓↓↓手机设备尺寸-推荐：900x268px↓↓↓-->
<source media="(min-width: 18em)" srcset="手机设备图片地址" width="100%">

<!--↓↓↓当图片无法加载时显示备用图片↓↓↓-->
<img src="备用图片地址" width="100%" alt="青鹿云-www.milubk.com">

</picture>

可以看到这里的「srcset」属性类似「image-set」，通常情况下，「srcset」里面的资源是具有 fallback 特性的，也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。

基本用法：

当设备宽度大于45em时启用电脑设备尺寸图片