响应式选择合适的图片进行加载，对于流量不那么拮据的今天而言，应该还是前端人员改不掉的习惯，就是单纯的更好地展示图片

应用场景：

　　1. 相同图片，尺寸不同;

　　2. 不同图片，响应式选择。

三种方式：

　　1. media查询；

　　2. img属性 srcset+sizes；// 这个有一个小弊病，对于加载完成了的图片，动态调整视口大小，只是操作成功加载的那张图片的显示尺寸（改换不了资源就是跟换不了图片）

　　3. picture + source。

=====================================开始！

　　① media 大家很熟了，不多说。。

　　　　　　有个地方提一下：仅用css的话（不用less或者sass），需要改换资源（不同的图片），

　　　　　　那么使用background-image会给你省不少麻烦，利用media限制条件 -> 更换url地址。

所以设置的常有：

@media  screen and (min-width: 1200px) {
}
@media  screen and (min-width: 992px) {
}
@media  screen and (min-width: 768px) {
}
@media screen and (min-width: 480px) {
}

 

 　　

　　②  srcset配合sizes ：

　　　　　　怎么写？

 1 <img
 2   srcset="
 3     ./img/1-320.png 320w,
 4     ./img/1-480.png 480w,
 5     ./img/1-800.png 800w
 6   "
 7   sizes="(max-width: 320px) 280px,(max-width: 480px) 440px,(max-width: 768px) 700px, 1000px"  
 8   src="./img/elva-fairy-800.png" 
 9   alt="相同的3张图片，不同尺寸大小" 
10 />

320w、480w、800w可以当做是图片原始宽度大小

对应的尺寸范围：0-320px，320-480px，480-768px，768px以上；

对应img的width：280px、440px、700px、1000px

对应选择的图片是： 1-320.png、1-480.png、1-800.png、1-800.png

　

但是，当换成下面的条件，选择加载的图片发生了变化

1 sizes="(max-width: 320px) 350px,(max-width: 480px) 440px,(max-width: 768px) 800px, 1000px"

对应的尺寸范围：0-320px，320-480px，480-768px，768px以上；

对应img的width：350px、440px、800px、1000px

对应选择的图片是： 1-480.png、1-480.png、1-800.png、1-800.png

 

该段小结：

1. img自己从srcset集中选择图片，优先选择大于显示尺寸的图片进行等比压缩来显示; // 实际300kb的图片，加载可能只需要100kb了

如上，350 > 320,那么img标签就会选择加载480的，等比压缩到350px宽，显示

2. 没有合适的更大图片，就会把自己加载的最大的进行等比放大，来显示; // tip： 800px->1000px还可以接受，500px->1000px，不要太糊哦　

如上, 768px后设置宽度1000px，将加载的1-800.png的图片进行等比放大到1000px宽，显示

3. 可以使用'vw'这样的单位，代替上面的'px'，来使得你的图片根据视口平滑地调整大小

比如这样：

sizes="(max-width: 320px) 100vw,(max-width: 480px) 50vw, 800px"　

jieshi



　　


 


③ picture + source 


　　　　注意： 虽然被picture标签包裹的有两张图片source，但是加载的时候只会选择一张加载




1 <picture>
2   <source srcset="./imgs/banner-640X750.jpg" media="(max-width: 992px)" />
3   <source
4     srcset="./imgs/banner-1920X960.jpg"
5     media="(min-width: 992px)"
6   />
7   <img src="./imgs/banner-1920X960.jpg" alt="banner-pic" width="100%" />
8 </picture>




 


picture标签包容性好，你可以放上<a>或者<map>+<area>,来给你的图片加上跳转链接，


下边的，我把他们放一起了，用的话，用其一就好，要么用<a>，要么用<map>+<area>




 1 <picture id="banner_pics">
 2     <a href="http://wwww.baidu.com" class="more-info">了解更多</a> 
 3     <source srcset="./imgs/banner-640X750.jpg" media="(max-width: 992px)" />
 4     <source srcset="./imgs/banner-1920X960.jpg" media="(min-width: 992px)" />
 5     <img src="./imgs/banner-1920X960.jpg" alt="" usemap="#myMap" />
 6     <map name="myMap" id="myMap">
 7     <area
 8         shape="rect"
 9         coords="43.75%, 74.69%, 56.35%, 83.64%"
10         href="http://www.baidu.com"
11         target="_blank"
12         alt="baidu"
13     />
14     </map>
15 </picture>




 


 没什么好总结的，用得到就试试吧，


毕竟，现在用vue、react很少操作dom了，再来个微信小程序，mpvue啥的。。。


可能偶尔骚一下，把它们写在template里边，哈哈哈^_^