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"
	/>

---

总结

学习记录。