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 元素