美术指导

Katie Hempenius
Katie Hempenius
X - Web开发指南

试用此演示

  • 要预览网站，请按View App。然后按Fullscreen fullscreen。
  • 使用不同的浏览器尺寸重新加载应用。请注意图像的不同之处：它们不仅尺寸不同，而且裁剪和宽高比也不同。

这里发生了什么？

美术指导在不同的显示尺寸上显示不同的图像。

响应式图像加载同一图像的不同尺寸。美术指导在此基础上更进一步，并根据显示加载完全不同的图像。

使用美术指导来改善视觉呈现。例如，此演示中的不同图像裁剪确保兴趣点（花朵）始终以细节显示，而与显示器无关。美术指导的好处纯粹是美观的；与响应式图像相比，它没有性能优势。

查看代码

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

代码的工作原理

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

picture

<picture> 标记为零个或多个 <source> 标记和一个 <image> 标记提供了一个包装器。

source

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

浏览器使用第一个 <source> 标记，该标记具有返回 true 的 媒体查询。如果媒体查询均不匹配，则浏览器将回退到加载 <img> 标记指定的图像。

img

<img> 标记使此代码可以在不支持 <picture> 标记的浏览器上工作。

如果浏览器不支持 <picture> 标记，它将加载 <img> 标记指定的图像。