Katie Hempenius
试用此演示
- 如需预览网站，请按 View App（查看应用）。然后按 Fullscreen（全屏）
。 - 使用不同大小的浏览器重新加载应用。请注意这些图片的不同之处：它们不仅尺寸不同，剪裁方式和宽高比也不同。
发生了什么情况？
艺术指导：在不同显示大小的设备上显示不同的图片。
自适应图片会加载同一图片的不同尺寸。美术指导更进一步，根据显示屏加载完全不同的图片。
使用艺术指导来改进视觉呈现。例如，此演示中的不同图片剪裁确保无论显示屏如何，地图注点（花朵）始终以详细方式显示。美术指导的优势仅在于美学；与自适应图片相比，它没有任何性能优势。
查看代码
- 查看
index.html可查看此演示的艺术指导代码。
代码的运作方式
艺术指导使用 <picture>、<source> 和 <img> 标记。
picture
<picture> 标记可为零个或多个 <source> 标记和一个 <image> 标记提供封装容器。
source
<source> 标记用于指定媒体资源。
浏览器会使用第一个 <source> 标记，并使用返回 true 的媒体查询。如果所有媒体查询都不匹配，浏览器会回退到加载 <img> 指定的图片。标记之前。
img
<img> 标记可让此代码在不支持 <picture> 标记的浏览器中正常运行。
如果浏览器不支持 <picture> 标记，则会加载 <img> 标记指定的图片。