上一篇文章提到 RWD / BootStrap（http://ithelp.ithome.com.tw/articles/10187807 ）
可以依照使用者的畫面解析度，自動調整版面、圖片大小....等等

其實 HTML5也有類似的功能， picture標籤

假設我有大中小，三張圖片。
依照使用者畫面的尺寸（寬度），我可以決定呈現哪一張圖片。

我們來看看今天的 Youtube教學影片吧 -- https://youtu.be/-SiUTX4fsY4

這是 HTML5提供的新元素（標籤）
所以不需要在網頁表頭，掛載許多 .js或是 .css檔案

        <picture>         
            <source srcset="\Images_Book\45_Book_big.jpg" media="(min-width: 1024px)">
            <source srcset="\Images_Book\45_Book_middle.jpg" media="(min-width: 750px)">
            <source srcset="\Images_Book\45_Book_small.jpg" media="(min-width: 300px)">
 
            <img src="\Images_Book\45_Book_big.jpg" alt="預設的圖片">
        </picture>

如果對方的瀏覽器，無法辨識（解譯）這樣的效果
就會使用傳統HTML的 img標籤來做

關於本文範例，請看 dotblogs.com.tw/mis2000lab/2014/12/04/html5_picture_rwd_image

時間過得很快，三十天的鐵人賽快結束了，還有很多東西想分享
只能做些取捨，請看下一篇文章：http://ithelp.ithome.com.tw/articles/10188033