媒體

媒體查詢

不一定要用媒體查詢,可以用grid/flex來做。

國際化

save for later

為了配合不同的書寫模式進行調整,請避免使用方向left/right屬性。請改用邏輯屬性。

文字

根據預設,文字會自動換行,且不含任何其他樣式。

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

文行長度

請勿使用固定單位 (例如 px) 設定行長度。使用者可以縮放字型,而線條長度也應隨之調整。使用相對單位arrow-up-right,例如 remch

article {
  max-inline-size: 66ch;
}

行高

較短的文字行有較大的 line-height 值。

請在 line-height 宣告中使用無單位值。這可確保行高是相對於 font-size

正在載入字型

save for later

圖片

逻辑尺寸属性arrow-up-right

尺寸提示

如果您知道圖片尺寸,請加入 widthheight 屬性。即使圖片是以不同大小顯示 (因為 max-inline-size: 100% 規則),瀏覽器依然知道寬度和高度的比例,並且能夠設定正確的空間量。這樣一來,當圖片載入時,其他內容就會停止跳轉。

正在載入提示

使用 loading 屬性,指示瀏覽器是否要延遲載入圖片,直到圖片位於可視區域範圍內或靠近可視區域。如果是需捲動位置圖片,請使用 lazy 的值。瀏覽器要等到使用者向下捲動網頁,直到圖片即將顯示圖片為止,才會載入延遲圖片。如果使用者從未捲動畫面,圖片就不會載入。

對於不需捲動位置的主頁橫幅,請勿使用 loading。如果您的網站自動套用 loading="lazy" 屬性,通常可以透過設定 eager 屬性 (此為預設值) 來避免套用上述屬性:

圖片 save for later

工具包中還有一個 HTML 元素,可協助您進一步控制圖片:picture 元素。

如果您只需要放送不同大小版本同一張圖片,建議使用 srcset。不過,如果圖片在較小的尺寸下無法呈現良好效果,您可以嘗試將圖片裁剪成裁剪版本。

Day06 X 圖片最佳化arrow-up-right

更多使用者介面模式

如要進一步瞭解版面配置和 UI 元素模式,請參閱 web.dev 的「模式arrow-up-right」一節。

flex 01x 11x的方法比較

志中的得獎者

Last updated