Katie Hempenius
試用這個示範
- 如要預覽網站，請按下「View App」，然後按下「Fullscreen」
。 - 使用不同的瀏覽器大小重新載入應用程式。請注意圖片之間的差異：不僅大小不同，裁剪方式和顯示比例也不同。
這是怎麼回事？
藝術指導：在不同螢幕大小上顯示不同圖片。
回應式圖片會載入不同大小的同一張圖片。美術指導則更進一步，根據螢幕載入完全不同的圖片。
運用美術指導，提升視覺呈現效果。舉例來說，這個示範中的不同圖片裁剪方式可確保無論顯示方式為何，都能詳細顯示感興趣的點 (花朵)。美術指導的好處純粹是美觀，與回應式圖片相比，並不會提升效能。
查看程式碼
- 查看
index.html，瞭解這個試用版的美術指導程式碼。
程式碼運作方式
美術指導會使用 <picture>、<source> 和 <img> 標記。
圖片
<picture> 標記可為零或多個 <source> 標記和一個 <image> 標記提供包裝函式。
source
<source> 標記會指定媒體資源。
瀏覽器會使用第一個 <source> 標記，並搭配傳回 true 的媒體查詢。如果沒有任何媒體查詢相符，瀏覽器就會改為載入 <img> 指定的圖片。標記。
img
<img> 標記可讓這段程式碼在不支援 <picture> 標記的瀏覽器上運作。
如果瀏覽器不支援 <picture> 標記，則會載入 <img> 標記指定的圖片。