＜picture＞ 标签——自适应显示不同图片

功能

picture元素通过包含一个或多个元素和一个元素再结合media（媒体查询）来使用，
根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素：

案例

菜鸟案例

picture 元素

  
  
  

注意事项

1. 是行内元素。

2. 默认显示source引入的图片资源，当不满足设置的media（媒体查询）条件或source不存在，则显示img引入的图片资源

3. 若source中没有写media（媒体查询）条件，则默认满足条件，显示该source引入的图片，这样的话永远都不会显示img图片。
   (1)第一个source 没有写media条件，则不论屏幕宽度是多少，都显示第一个source引入的图片。因为没有media默认满足条件，则不会继续往下判断。

   
   
   
   
   
   
   
   
   picture 元素
   
   
     
     
     
   
   
   
   
   
   

   （2）第二个source没有写media条件，则当第一个source满足条件时，显示第一个source图片，否则显示第二个source图片。

   
   
   
   
   
   
   
   
   picture 元素
   
   
     
     
     
   
   
   
   
   
   

4. picture标签中必须有img，如果只有source，则不会显示任何图片

5. picture标签有几个img，就会显示几张图片，如何是是source满足条件，则显示3张同样的该source引入的图片，否则显示img各自引入的图片。

   
   
   
   
   
   
   
   
   picture 元素