HTML5 自適應視圖寬

■知識點

    W描述符可以簡單理解為描述源圖的像素大小，無關(guān)寬度還是高度，大部分情況下可以理解為寬度。如果沒有設置sizes, —般是按照1OOvm來選擇加載圖片。

■實例設計

    本例設計：如果視口在500px及以下時，使用500w的圖片；如果視口在lOOOpx及以下時，使用1000w的圖片，以此類推。最后再設置如果媒體查詢都滿足的情況下，使用2000w的圖片。

    實現(xiàn)代碼如下所示：

    <img width="500" srcset="

        images/2000.png 2000w, 

        images/1500.png 1500w, 

        images/1000.png lOOOw, 

        images/500.png 500w

        "

    sizes="

        (max-width: 500px) 500px,

        (max-width: lOOOpx) lOOOpx,

        (max-width: 1500px) 1500px,

    2000px "

    src="images/500 .png"

/>

    如果沒有對應的w描述，一般選擇第一個大于它的。例如，如果有一個媒體查詢是700px, 一般加載1000w對應的源圖。

    下面再設計一個示例，嘗試使用百分比來設置視口寬度。

<img width="500" srcset="

        images/2000.png 2000w, 

        images/1500.png 1500w, 

        images/1000.png lOOOw, 

        images/500.png 500w

        "

    sizes="

        (max-width: 500px) lOOvm,

        (max-width: lOOOpx) 80vm,

        (max-width: 1500px) 50vm,

        2000px "

    src="images/500.png"

/>

    這里設計圖片的選擇：視口寬度乘以1、0.8或0.5,根據(jù)得到的像素來選擇不同的w。例如，如果viewport為800px，對應80vm，就是800><0.8=640px該加載一個640w的源圖，但是srcset中沒有640w，這時會選擇第一個大于640w的，也就是1000w。如果沒有設置，一般是按照100vm來選擇加載圖片。