试用此演示版
- 如需预览网站,请按查看应用,然后按全屏 。
- 使用不同的浏览器大小重新加载应用。请注意这些图片的不同之处:它们不仅大小不同,而且剪裁和宽高比也不同。
这是怎么回事?
艺术设计会以不同的屏幕尺寸显示不同的图片。
自适应图片会加载同一图片的不同尺寸。艺术指导更进一步,会根据显示屏加载完全不同的图片。
使用美术设计来提升视觉呈现效果。例如,此演示中的不同图片剪裁可确保地图注点(花朵)在任何显示屏幕下都能始终呈现细节。艺术指导的优势纯粹是美观性;与自适应图片相比,它没有性能方面的优势。
查看代码
- 请查看
index.html
查看此演示的艺术指导代码。
代码的运作方式
艺术指导使用 <picture>
、<source>
和 <img>
标记。
照片
<picture>
标记可为零个或多个 <source>
标记和一个 <image>
标记提供一个封装容器。
source
<source>
标记指定媒体资源。
浏览器将第一个 <source>
标记用于返回 true 的媒体查询。如果没有匹配的媒体查询,浏览器会回退到加载 <img>
指定的图片。标签中。
img
借助 <img>
标记,此代码可以在不支持 <picture>
标记的浏览器中运行。
如果浏览器不支持 <picture>
标记,就会加载 <img>
标记指定的图片。