picture元素的使用

 

  前言

  相信前端小伙伴们对img元素已经烂熟于心,但不知是否了解picture元素呢?

  简单来说,picture元素通过包含一个或多个元素和一个元素再结合media(媒体查询)来使用

  从而达到根据不同屏幕分辨率显示不同图片的效果,具体使用请看下面demo

  

  Demo(下面demo会在屏幕宽度>=1200px时显示source引入的图片,当<1200px时显示img引入的图片)

DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title>title>
     head>
     <body>
           <picture>
                <source srcset="http://www.bhmpics.com/download/the_boxtrolls_movie_poster-1920x1080.jpg" media="(min-width: 1200px)"/>
                <img src="https://avatars1.githubusercontent.com/u/31434913?s=460&v=4"/>
           picture>
           
     body>
html>

 

  3个注意事项

    ①:默认显示source引入的图片资源,当不满足设置的media(媒体查询)条件或source不存在,则显示img引入的图片资源

      ②:source中没有写media(媒体查询)条件,则img的图片资源始终不会被显示,默认只显示source引入的图片资源

      ③:picture标签中必须有img,如果只有source,则不会显示任何图片

 

  兼容性(下面依次是PC端和移动端的兼容性截图,PC端主流浏览器除IE外都支持,移动端IOS9及以上,安卓6及以上都支持)

  picture元素的使用_第1张图片

    picture元素的使用_第2张图片

 

 

 

 

你可能感兴趣的:(picture元素的使用)