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

■知識點

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

    圖像URL。

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

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

    sizes屬性的寫法與srcset相同，也是用逗號分隔的一個或多個字符串，每個字符串由下面兩部分組成。

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

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

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