响应式图片

方法一：

picture标签

引用HTML5新特性

1. 创建标签
2. 在标签内使用source元素
3. 添加media属性
4. srcset加载图片
5. img元素避免老旧浏览器不识别picture标签和srcset属性

   1 2 3 4 5 6

   <picture> <source srcset="img/300.png" media="(min-width:300px)"> <source srcset="img/600.png" media="(min-width:600px)"> <source srcset="img/1200.png" media="(min-width:1200px)"> <img srcset="img/1200.png"/> </picture>

方法二：

srcset属性

1. img标签的新属性

2. 配合sizes属性使用更好

   1 2 3 4 5 6 7

   <img srcset="img/300.png 300w, img/600.png 600w, img/1200.png 1200w" sizes="(max-width:300px) 100vm, (max-width:600px) 50vm, (max-width:1200) 300px" />

   srcset中的300w、600w、1200w类似于媒体查询，规定了不同宽度下应该加载的图片。当图片外围的宽度不为视口宽度的100%时，该属性会出现一些小问题，所以需要与sizes属性相配合。 sizes属性的媒体查询规定的是视口大小与其缩放比例

   方法三：

   js或cookie控制服务器 详细参考