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

---

总结

学习记录。