HTML5 自適應(yīng)像素比

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

    除了source元素外，HTML5為img元素也新增了srcset屬性。srcset屬性是一個(gè)包含一個(gè)或多個(gè)源圖的集合，不同源圖用逗號(hào)分隔，每一個(gè)源圖由下面兩部分組成。

    圖像URL。

    x(像素比描述）或w (圖像像素寬度描述）描述符。描述符需要與圖像URL以一個(gè)空格進(jìn)行分隔，w描述符的加載策略是通過(guò)sizes屬性里的聲明來(lái)計(jì)算選擇的。

    如果沒(méi)有設(shè)置第二部分，則默認(rèn)為lx。在同一個(gè)srcset里，不能混用x描述符和w描述符，或者在同一個(gè)圖像中，既使用x描述符，也使用w描述符。

    sizes屬性的寫(xiě)法與srcset相同，也是用逗號(hào)分隔的一個(gè)或多個(gè)字符串，每個(gè)字符串由下面兩部分組成。

    媒體查詢。最后一個(gè)字符串不能設(shè)置媒體查詢，作為匹配失敗后回退選項(xiàng)。

    圖像size (大?。┬畔?。注意，不能使用％來(lái)描述圖像大小，如果想用百分比來(lái)表示，應(yīng)使用類(lèi)似于vm (lOOvm = 100%設(shè)備寬度）這樣的單位來(lái)描述，其他的（如px、em等）可以正常使用。

    sizes里給出的不同媒體查詢選擇圖像大小的建議，只對(duì)w描述符起作用。也就是說(shuō)，如果srcset里用的是x描述符，或根本沒(méi)有定義srcset，這個(gè)sizes是沒(méi)有意義的。