美术指导

Katie Hempenius

试用此演示

• 如需预览网站，请按 View App（查看应用）。然后按 Fullscreen（全屏）。
• 使用不同大小的浏览器重新加载应用。请注意这些图片的不同之处：它们不仅尺寸不同，剪裁方式和宽高比也不同。

发生了什么情况？

艺术指导：在不同显示大小的设备上显示不同的图片。

自适应图片会加载同一图片的不同尺寸。美术指导更进一步，根据显示屏加载完全不同的图片。

使用艺术指导来改进视觉呈现。例如，此演示中的不同图片剪裁确保无论显示屏如何，地图注点（花朵）始终以详细方式显示。美术指导的优势仅在于美学；与自适应图片相比，它没有任何性能优势。

查看代码

• 查看 index.html 可查看此演示的艺术指导代码。

代码的运作方式

艺术指导使用 <picture>、<source> 和 <img> 标记。

picture

<picture> 标记可为零个或多个 <source> 标记和一个 <image> 标记提供封装容器。

source

<source> 标记用于指定媒体资源。

浏览器会使用第一个 <source> 标记，并使用返回 true 的媒体查询。如果所有媒体查询都不匹配，浏览器会回退到加载 <img> 指定的图片。标记之前。

img

<img> 标记可让此代码在不支持 <picture> 标记的浏览器中正常运行。

如果浏览器不支持 <picture> 标记，则会加载 <img> 标记指定的图片。