Katie Hempenius
立即試用
- 如要預覽網站，請按下「查看應用程式」。然後按下
全螢幕
。 - 使用不同的瀏覽器大小重新載入應用程式。請注意 不但大小不同，而且裁剪和裁剪方式 顯示比例。
到底怎麼回事？
藝術方向 在不同大小的螢幕上顯示不同的圖片。
回應式圖片會載入同一張圖片的各種尺寸。藝術方向 這項功能會更進一步，根據使用者的 螢幕。
使用藝術方向功能來改善視覺呈現方式。舉例來說 在此示範中，我們會裁剪圖片，確保搜尋點 (花朵) 不論螢幕為何， 一律都會詳細顯示。藝術方向的好處 純粹美感；比起回應式圖片，也不會提高成效
查看程式碼
- 查看
index.html以瞭解此示範的藝術方向程式碼。
程式碼的運作方式
藝術方向會使用
<picture>、
<source>,
和 <img> 標記。
相片
<picture> 代碼會為 0 個或多個 <source> 標記和一個 <image> 標記提供包裝函式。
資料來源
<source> 標記會指定媒體資源。
瀏覽器使用第一個 <source> 標記搭配媒體查詢
傳回「是」如果沒有相符的媒體查詢，
瀏覽器改回載入 <img> 指定的圖片。
標記。
img
<img> 標記可讓這段程式碼在不支援
支援 <picture> 標記
如果瀏覽器不支援 <picture> 標記，則會載入
<img> 標記指定的映像檔。