前言
相信前端小伙伴們對img元素已經爛熟於心，但不知是否了解picture元素呢？
簡單來說，picture元素通過包含一個或多個<source>元素和一個<img>元素再結合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及以上都支持）
