藝術指導

Katie Hempenius

試用這個示範

• 如要預覽網站，請按下「View App」。然後按下「Fullscreen」圖示 。
• 使用不同大小的瀏覽器重新載入應用程式。請注意圖片的差異：不僅尺寸不同，裁剪方式和顯示比例也不同。

發生什麼事了？

藝術指導會在不同螢幕尺寸上顯示不同的圖片。

回應式圖片會載入相同圖片的不同大小。藝術指導則更進一步，會根據螢幕載入完全不同的圖片。

使用藝術指導來改善視覺呈現效果。舉例來說，無論螢幕尺寸為何，這項示範中的不同圖片裁剪方式，都能確保重點 (花朵) 一律以詳細方式顯示。藝術方向的優點純粹是美學上的，與回應式圖片相比，它不會帶來任何成效優勢。

查看程式碼

• 請參閱 index.html，查看這個示範的藝術指導程式碼。

程式碼的運作方式

藝術方向使用 <picture>、<source> 和 <img> 標記。

圖片

<picture> 標記會為零個或多個 <source> 標記和一個 <image> 標記提供包裝函式。

source

<source> 標記會指定媒體資源。

瀏覽器會使用第一個 <source> 標記，搭配傳回 true 的媒體查詢。如果沒有任何媒體查詢相符，瀏覽器就會改為載入 <img> 指定的圖片。標記。

img

<img> 標記可讓這段程式碼在不支援 <picture> 標記的瀏覽器中運作。

如果瀏覽器不支援 <picture> 標記，則會載入 <img> 標記指定的圖片。