Topics

調整邊距clamp()目前普遍採用允許值在最小值和最大值之間變化的實現方式。

它對於響應能力非常有用，無障礙縮放考慮到這一點，就會發現有點棘手。

clamp() 的常見範例

例如，邊距clamp()如果你想調整它，你可能會這樣寫：

:root {
  --clamp-base: 16;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1440;

  --spacing-lg-min: 24;
  --spacing-lg-max: 48;

  --spacing-lg-slope: calc(
    (var(--spacing-lg-max) - var(--spacing-lg-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --spacing-lg-intersection: calc(
    (var(--spacing-lg-max) - var(--clamp-viewport-max) * var(--spacing-lg-slope)) / var(--clamp-base)
  );
  --spacing-lg: clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  );
}

我不會在這裡詳述，但是

• 在智慧型手機上--spacing-lg-min尺寸
• 在PC上--spacing-lg-max尺寸
• 在此期間，它會平穩且多變地擴張和收縮。

所以這是一個非常容易使用的模式。

可訪問性存在哪些缺陷？

問題是，WCAG 2.0 成功標準 1.4.4“調整文字大小”是時候嘗試回應了。

該標準最初是在智慧型手機普及之前製定的，目的是允許即使在 PC 上將圖像放大至 200% 也可以查看，但同樣的條件也適用於智慧型手機瀏覽器。

事實上，當你在智慧型手機上放大到 200% 時，往往會出現這種現象。

1. 透過放大（縮放）文本，rem基於單位擴展到邊緣它最終發生了。
2. 這允許您創建一個邊距過寬就變成這樣了。
3. 因此，內容顯示區域極為狹窄。這可能會導致佈局扭曲並使頁面難以閱讀。

*然而，實際上，即使放眼海外強制遵守WCAG標準的政府網站，似乎也沒有採取任何行動。這可能是出於成本效益考慮，而且智慧型手機上本來就沒有必要放大200%，所以在現場層面，人們可能會認為「不做也沒關係」。

如何解決這個問題？

受文字放大的影響rem反而，vw使用基於視口的單位，例如即使縮放，也不要將邊距設定得太大這樣做很重要。

但vw如果您僅指定clamp()這並沒有利用能夠控制最小值和最大值的優勢。

這就是min()這是一個功能！

min()將使用傳遞的值中的“最小值”。使用此特性可以在正常模式和擴展模式之間切換應用的值。

以下是編寫方法。

--spacing-lg: min(
  calc(var(--spacing-lg-min) / var(--clamp-viewport-min) * 100vw),
  clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  )
);

以 375 CSS 像素顯示時，最小值的第一個值為--spacing-lg-min將24px的值轉換為vw，結果為6.4vw。

clamp()最小值為1.5rem=24px，但放大200%後變成48px，因此左邊的6.4vw較小，將適用。

換句話說，

• 通常時（100%表示）：
  • clamp()的價值vw它將小於參考值。
  • min()由於使用了較小的一個，clamp()有效，顯示將根據螢幕寬度而變化。
• 放大（200%）：
  • clamp()之內rem隨著擴張而變得更大，vw參考值較小。
  • vw套用標準值，並將邊距固定為螢幕寬度的百分比，以防止過度放大。

現在， ”響應便捷“和”無障礙設施注意事項「您可以同時實現這兩者！

*順便說一句，在電腦上查看時，最好放大包括邊距在內的圖像以保持設計的平衡。--clamp-viewport-min此標準僅適用於智慧型手機。

比較實際行為

頂部僅為夾具，底部為最小夾具+夾具。

如果您在智慧型手機上放大到 200%，您就可以清楚地看到差異。

* iOS Safari 點選網址列左側圖示可放大頁面，Android Chrome 點選網址列右上角圖示可放大頁面。

概括

• clamp() 對於回應邊距調整很有用
• 但是，如果放大圖像，它可能會擴展到邊緣，從而導致佈局問題。
• 與 min() 結合，正常時可變，擴大時可控制這可以實現平衡的響應。

如果您注重 WCAG 合規性，那麼採用此類實現方式會讓您安心。 「注意智慧型手機上 200% 的放大率」的實現方式仍然很少見，但它們在不影響正常可讀性的前提下降低了可訪問性風險。

順便說一句，如果您想進行除邊距之外的更精細的調整，您還可以指定更窄斷點的媒體查詢。

@media (max-width: 239px) {
  /* 拡大時に適用したいCSS */
}

例如，如果將 375px 寬的螢幕放大到 200%，瀏覽器將計算視口寬度為“該尺寸的一半（大約 188px）”，以便能夠匹配這種狹窄的條件。

※239px 的值僅為範例。請在調整時考慮未來螢幕放大的可能性，以免影響正常顯示。

將「clamp() + min()」與「窄斷點媒體查詢」結合，可以提供更靈活、更可靠的可訪問性支援！