試用此示範模式
- 如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
- 使用其他瀏覽器大小重新載入應用程式。請注意圖片的差別:圖片的尺寸不但不同,裁剪和顯示比例也不同。
到底怎麼回事?
藝術方向會顯示不同螢幕尺寸的各種圖片。
回應式圖片載入同一張圖片的不同大小。藝術方向更進一步,並根據螢幕載入完全不同的圖片。
使用藝術方向功能改善視覺呈現的效果。例如,在這個示範中,不同圖片裁剪,確保搜尋點 (花朵) 無論顯示與否都能清楚顯示。藝術方向的優點純粹是美術設計,因此不會比回應式圖片更具效能。
查看程式碼
- 查看
index.html
,即可查看此示範的圖片方向程式碼。
程式碼的運作方式
圖片方向會使用 <picture>
、<source>
和 <img>
標記。
相片
<picture>
代碼會為零或多個 <source>
標記和一個 <image>
標記提供包裝函式。
資料來源
<source>
標記會指定媒體資源。
瀏覽器會使用第一個 <source>
標記,其中包含傳回 true 的媒體查詢。如果媒體查詢都不相符,瀏覽器會改回載入 <img>
指定的圖片。標記。
img
<img>
標記可讓這個程式碼在不支援 <picture>
標記的瀏覽器中運作。
如果瀏覽器不支援 <picture>
標記,就會載入 <img>
標記指定的圖片。