媒體

媒體查詢

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

國際化

save for later

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

文字

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

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

文行長度

請勿使用固定單位 (例如 px) 設定行長度。使用者可以縮放字型，而線條長度也應隨之調整。使用相對單位，例如 rem 或 ch。

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

行高

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

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

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

正在載入字型

save for later

圖片

img {
  max-inline-size: 100%;   //對應 max-width
  block-size: auto;  //對應height
 aspect-ratio: 2/1;   x/y 指定的 width / height 比率
  object-fit: cover; //會裁切
  object-position: top center; 保留焦點位置
}

逻辑尺寸属性

尺寸提示

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

正在載入提示

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

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

圖片 save for later

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

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

Day06 X 圖片最佳化

更多使用者介面模式

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

flex 01x 11x的方法比較

拆解鬆餅  |  Layout patterns  |  web.devweb.dev

志中的得獎者

在 CSS 中置中  |  Articles  |  web.devweb.dev