HTML 5.1 新增加了 img 元素的 srcset 、 sizes 屬性和 picture 元素,使得響應式圖片的實現更為簡單便捷,很多主流瀏覽器的新版本也對這些新增加的內容支持良好。
一句話總結
1、如下關於img的srcset代碼的意思是什麼?
<img
srcset=“
http://placehold.it/2500 5x,
http://placehold.it/1500 3x,
http://placehold.it/1000 2x,
http://placehold.it/500 1x
"
src="http://placehold.it/500/abc"
/>
- a、5像素比(現在很多安卓手機比如小米、華為的所謂高清2k屏就是5像素比以上的)的設備使用2500×2500像素的圖片,其它類推
- b、對於不支持 srcset 的瀏覽器,顯示 src 的圖片(這個圖片是500×500像素、RGB 顏色 abc 的)
上面代碼的意思就是:5像素比(現在很多安卓手機比如小米、華為的所謂高清2k屏就是5像素比以上的)的設備使用2500×2500像素的圖片,3像素比的設備使用1500×1500像素的圖片,2像素比的設備使用1000×1000像素的圖片,1像素比(普通的筆記本電腦顯示屏就是1像素比的)的設備使用500×500像素比的圖片。
對於不支持 srcset 的瀏覽器,顯示 src 的圖片(這個圖片是500×500像素、RGB 顏色 abc 的)。
2、如下關於img的sizes屬性的作用是什麼?
<img
srcset=“
http://placehold.it/2000 2000w,
http://placehold.it/1500 1500w,
http://placehold.it/1000 1000w,
http://placehold.it/500 500w
"
sizes=“
(max-width: 500px) 500px,
(max-width: 1000px) 1000px,
(max-width: 1500px) 1500px,
2000px
"
src="http://placehold.it/500/abc"
/>
不用的媒體查詢條件下,圖片的寬度是不一樣的,以做響應式的響應
二、img 的 srcset、sizes 屬性和 picture 元素