HTML5 響應(yīng)視圖大小
<picture>標(biāo)簽僅作為容器,可以包含一個(gè)或多個(gè)<80111:06>子標(biāo)簽。<source>可以加載多媒體源,它包含如下屬性。
srcset:必需。設(shè)置圖片文件路徑,如srcset=”img/minpic.png";或者是逗號(hào)分隔的用像素密度描述的圖片路徑,如srcset="img/minpic.png,img/maxpic.png2x")。
media:設(shè)置媒體查詢,如 media=" (min-width: 320px)"。
sizes:設(shè)置寬度,如 sizes="100vw"?;蛘呤敲襟w查詢寬度,如 sizes="(min-width: 320px) lOOvw"。 也可以是逗號(hào)分隔的媒體查詢寬度列表,如sizes="(min-width: 320px) 1⑻vw,(min-width: 640px) 50vw, calc(33vw - lOOpx)”。
type:設(shè)置 MIME 類型,如 type="image/webp"或者 type="image/vnd.ms-photo"。
瀏覽器將根據(jù)source的列表順序,使用第一個(gè)合適的source元素,并根據(jù)這些設(shè)置屬性,加載具體的圖片源,同時(shí)忽略后面的<80111*06> 標(biāo)簽。
點(diǎn)擊加載更多評(píng)論>>