[筆記][HTML5] 使用picture tag來做到響應式圖片
參考
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
情境
在開發網頁的時候圖片要依照不同裝置下來呈現不同尺寸以前都是要靠JS來做或是用CSS，現在HTML5
有一個新的標籤<picture>可以使用他來圖片在不同的條件螢幕寬度，高度，Pixel, orientation來載入不同的圖片，這是一個很方便的新功能只是要注意瀏覽器的支援。
任務
寫一個簡單的範例來測試功能是不是如我想像的，在這個範例的主要會建立三張圖片然後在網頁上呈現的條件分別是 :
- test_300x250.png (裝置寬度小於600px)
- test_320x480.png (裝置寬度大於600px並且小於720px)
- test_480x720.png(裝置寬度大於720px)
實作
結論
以上的範例很簡單當裝置寬度在不同的寬度下會分別去讀取不同的圖片，那要如何使用呢？首先先在<picture>底下加入<source>然後加入特定的條件來決定何時該讀取不同尺寸的圖片，看上面的程式應該是很好懂的，當然我的範例是很簡單的。如果你有什麼不知道的建議看我上面的參考文件。
我有寫一個測試頁面你可以直接上去試試去調整瀏覽器的寬度看圖片會不會因為不同的寬度出現不同的圖片 -> https://tmoimagetestapp.herokuapp.com/
留言