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