HTML5学习系列之响应式图像
HTML5学习系列之响应式图像
- 前言
- 响应式图像
- 响应视图大小
- 响应屏幕方向
- 响应像素密度
- 响应图像格式
- 自适应像素比
- 自适应视图宽
- 总结
前言
学习记录
响应式图像
响应视图大小
容器
- srcset：图片地址，必需有。
- media：设置媒体查询。
- sizes：设置宽度。
- type：设置MIME类型。
- 尝试使用兼容picture。
响应屏幕方向
在picture中的source中通过设置media、orientation、srcset。
响应像素密度
- 在picture中的source中的最后“.png” 后加2x。
- 如果是1x，直接可不用加后缀名。
响应图像格式
支持加载webp就加载该格式，如果不支持就不加载。
自适应像素比
srcset中包含的元素比较多。
自适应视图宽
<img width="500" srcset="
images/2000.png 2000w,
images/1500.png 1500w"
sizes="
(max-width:500px) 500px,
(max-width:1000px) 1000px"
src="images/500.png"
/>
总结
学习记录。