HTML5 自適應(yīng)視圖寬

■知識(shí)點(diǎn)

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

■實(shí)例設(shè)計(jì)

    本例設(shè)計(jì)：如果視口在500px及以下時(shí)，使用500w的圖片；如果視口在lOOOpx及以下時(shí)，使用1000w的圖片，以此類(lèi)推。最后再設(shè)置如果媒體查詢(xún)都滿(mǎn)足的情況下，使用2000w的圖片。

    實(shí)現(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"

/>

    如果沒(méi)有對(duì)應(yīng)的w描述，一般選擇第一個(gè)大于它的。例如，如果有一個(gè)媒體查詢(xún)是700px, 一般加載1000w對(duì)應(yīng)的源圖。

    下面再設(shè)計(jì)一個(gè)示例，嘗試使用百分比來(lái)設(shè)置視口寬度。

<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"

/>

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