百度前端技术学园

# 响应式图像

# 课程目标

学习如何使用 srcset 以及 <picture> 元素，来实现网页中的响应式图片处理方法

# 任务预览

我们将学习实现一个响应式图像:根据显示设备的分辨率不同加载不同的类型的图片,防止带宽的浪费.同时，在改变设备类型或者分辨率时，能够及时加载对应的图片。

# 阅读学习

# 任务一

使用 srcset/size 来创建一个分辨率切换器示例，下面两个场景：

  • 希望在所有设备上显示相同的图像，希望在可以支持它的设备上以更高的分辨率显示它，图像的高度和宽度应保持固定。
  • 基于 Viewport 大小,实现可变宽度的图像。

任务步骤

  • 首先创建不同大小的多张图片, 每个图片的图像都是一样的。可以利用 PLACEHOLD.IT 分别生成 1024x1024 px，768x768 px,512x512 px 的图片占位符，来代表同一个图像，的不同尺寸
  • 基于设备像素比选择,实现固定宽度图像:可以在不同的分辨率的情况下，提供相同尺寸的图像。对于设备像素比为 1 ，将使用 512x512 px 大小图像。对于 2 的设备像素比，将使用图像 1024x1024 px 图像
  • 基于 Viewport 大小,实现可变宽度的图像：使用 srcset/size 实现在不同的视图大小的情况下，提供不同尺寸大小的图像.如何显示您可以自行设定 。

# 任务二

使用 <picture>元素来实现艺术图片切换器

任务步骤

  • 利用 PLACEHOLD.IT 生成三个张不一样的图片，一张文本为 Small 代表为小号图像，一张文本为 Medium 代表中号图像,一张文本为 Big 代表为大号图片
  • 当 viewport 大于 960 像素时，会加载整体图片，也就是文本为 Big 的图像占位符
  • 当 viewport 宽度大于 575 像素时，浏览器会加载中号图像，也就是文本为 Medium 的图像占位符
  • 而当宽度小于 575 像素时，浏览器会加载小号图像，也就是文本为 Small 的图像占位符
  • 打开开发者工具，进入响应设计视图，调整页面宽度，查看是否是符合要求的图像文件被下载了。

# 自测问题

  • 思考响应式图片应用场景是什么？
  • srcset , size , picture 属性分别有什么作用？
  • 实现分辨率切换不同尺寸的图片是什么好处？为什么不用 JavaScript 和 CSS 来实现？

# 总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

  • 日期，今天的学习总用时，今天学习的目标是什么，是否达成
  • 哪些东西今天了解得比较透彻，说说自己的理解
  • 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
  • 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

    这里我们初步学习了响应式设计的基础，后面在 CSS 学习章节，我们将更加详细地学习响应式设计的内容

# 拓展阅读

← 网格布局 →