使用 Baseline CSS 功能製作回應式和浮動式排版

Miriam Suzanne

發布日期：2025 年 12 月 16 日

回應式網頁設計是一種網站建構方法，可確保網站在各種瀏覽器、可視區域尺寸、裝置和使用者偏好設定中，都能呈現良好的視覺效果並正常運作。套用至排版時，主要考量通常是根據瀏覽器寬度調整 font-size，這也可能影響 line-height 和 margin 等間距值。

身為設計師，我們有必要考量瀏覽器可用的空間，並據此調整字型排版。此外，請務必記住，不同使用者在各種裝置上會有不同的font-size需求，這取決於您無法掌握或瞭解的個人情況。因此，如果採取任何會剝奪使用者最終結果控制權的行動，都可能造成危險。使用者在瀏覽網頁時，可透過兩種主要輸入方式調整字型大小：

• 為所有網站提供預設 font-size 偏好設定。
• 逐一縮放網站。

本示範的目標是讓排版回應瀏覽器的可視區域大小和使用者輸入內容。但請務必瞭解，排版越是配合 viewport 調整，就越不會配合使用者偏好設定調整。如果要實作回應式排版，請務必謹慎操作，並測試結果是否仍可存取。

根據使用者偏好設定基本 font-size

在網路上定義任何排版時，第一步是根據使用者的font-size偏好設定，協商初始字型大小。這會用於網頁上的大部分文字，並做為其他字型大小 (例如標題) 的基礎。最簡單的方法是使用 1em 授予使用者完整控制權，不必進行任何調整。如果沒有設定任何其他 font-size 值，1em 會參照使用者偏好設定。另一方面，以像素或其他絕對單位 (甚至是與檢視區塊相關的單位) 設定 font-size 會完全覆寫使用者設定，因此應避免這麼做。

不過，不同用途需要不同的排版。如果想輕鬆閱讀文章，可以選擇大字體；如果想瀏覽資料量大的網站，則可選擇字體較小的精簡設計。無論是哪種情況，您可能都想建議符合設計的預設值，同時允許使用者根據自身情況調整結果。

方法一：根據假設計算乘數

常見的妥協做法是在 em 或 % 單位中定義調整後的 font-size，相對於使用者預設的 font-size。一般來說，這個方法會先假設瀏覽器提供16px預設值，且大多數使用者會保留該預設值。如果您認為 20px 字型大小更適合網站，通常 font-size 或 1.25em 125% 會產生您想要的結果：

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

您也可以在這裡使用 calc() 函式顯示算式，但您仍須知道方程式為何，也就是目標大小除以預期大小，再乘以 1em：

html {
  font-size: calc(20 / 16 * 1em);
}

由於預設值現在是相對於使用者的偏好設定 (本例中為 1.25 倍)，因此偏好設定較高或較低的使用者將能影響結果。但如果使用者和您都要求 20px 預設值，而結果是 25px (調整後的預設時間再次乘以 1.25)，這時就會出現無人要求的尺寸，可能顯得有些奇怪。

選項二：讓 clamp() 執行這項工作

更細緻的做法是使用 CSS 比較函式，完全不需要數學！您不必假設 1em 等於 16px，也不必從 px 進行不可靠的轉換到 em，而是將 1em 視為參照使用者偏好的變數。無論 1em 代表什麼像素值，font-size 的 max(1em, 20px) 一律會傳回設計偏好設定 (20px) 和使用者偏好設定 (1em) 中較大的值。這樣一來，使用者就能選擇較大的字型大小，但無法選擇較小的字型大小。

切換至 clamp() 函式後，如果使用者偏好的尺寸與您選擇的預設尺寸相差太遠，他們就能在兩個方向上縮放。舉例來說，只要 font-size 大於使用者預設值，但不大於預設值的 125%，就會預設為 20px。clamp(1em, 20px, 1.25em)

這樣一來，當設計接近使用者偏好設定時，系統就會優先採用您的設計，但如果使用者偏好設定超出指定範圍，系統仍會優先採用使用者偏好設定。完全不需要進行轉換計算、假設使用者偏好大小，也不需要將設計師和使用者的值相乘。

將此值設為 html 元素上的根 font-size 後，您現在可以在網站上的任何位置參照 1rem，做為協商的基本大小。

提升回應體驗

如要讓這個 font-size 對於檢視區塊做出回應，其中一個方法是新增媒體查詢 (或容器查詢) 中斷點。舉例來說，您可以根據螢幕大小變更箝制值：

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

另一種做法是將可視區域或容器單位新增至靜態基本值：

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

vw (可視區域寬度) 或 vi (可視區域內嵌大小) 單位代表可視區域總大小的 1%，也就是瀏覽器中用於算繪網站的部分。同樣地，cqw 和 cqi 單位代表網頁上內嵌大小容器的 1%。詳情請參閱容器查詢和單元示範。

這種做法通常稱為「流體排版」，因為 font-size 的變化在一定範圍的檢視區塊寬度內是恆定的，而不是在媒體或容器中斷點從一個值跳到另一個值。不過，請勿因轉場效果的流暢度而分心，因為只有在測試時順暢調整視窗大小，才能看出這項差異。使用者很少 (甚至從未) 看到這種效果。使用者可能會定期變更瀏覽器大小或縮放比例，但必須以緩慢流暢的方式進行調整，才能看出中斷點和可視區域單位的差異。這只會影響轉場效果，不會影響調整大小後的結果。

彈性字型大小的主要優點在於，您不必手動計算或指定中斷點，系統會在任何指定大小提供插補結果。您只需設定起點 (16px) 和變化率 (0.25vw 會提供 0.25px 增幅，適用於每 100px 增加的檢視區塊)，以及可能的最小值和最大值。font-size當檢視區塊寬度為 1000px 時，font-size 會是 16px + 2.5px 或 18.5px，但這項計算完全由瀏覽器處理。這是示範中採用的方法，使用 cqi 單位顯示以容器為基礎的回應式設計。如果用於根 (html) 元素，且沒有定義容器，cqi 單位仍會參照可視區域大小。

如果您偏好以特定可視區域大小的指定 font-size 為單位思考，建議使用更直接的媒體查詢方法，這種方法比較清楚。如果想根據預期中斷點計算可視區塊單位，情況就會變得複雜。許多人會從第三方工具複製及貼上值，但這樣產生的程式碼更難以理解或直接變更。一般而言，在 CSS 中，最適合的選項是能最清楚表達意圖的選項。

警告：可視區域變更不一定代表相同意義！

媒體查詢和 vi 單位的套用方式不同，但兩者都是根據相同的可視區域測量結果。如果可視區域寬度為 600px，則 100vw 會等於 600px，且系統會套用 (width > 500px) 媒體查詢內的樣式。

但「寬」的可視區域是什麼意思？600px事實上，像素並非固定大小，在所有情況下都具有單一意義。在較小的螢幕 (例如手機) 或窄版瀏覽器視窗中，像素較少的檢視區塊似乎很自然，但這並非可靠的假設。事實上，放大和縮小瀏覽器視窗對測量的可視區域寬度影響相同。其中一項動作 (縮放) 會變更像素大小，另一項動作 (調整大小) 則會變更瀏覽器本身的大小，但兩者都會變更瀏覽器寬度上的像素數量。從可視區域測量結果中，我們可得知目前像素大小與目前瀏覽器視窗之間的關係。

對使用者而言，縮放和調整大小的用途截然不同。使用者變更縮放比例是為了放大或縮小網頁內容，但調整瀏覽器大小只是管理不同螢幕的空間。即使使用者意圖不同，CSS 評估結果仍相同。視窗縮小或像素變大時，瀏覽器寬度上的像素就會變少。

這種落差會導致回應式排版不可靠。如果文字只根據可視區域或容器調整大小，使用者縮放功能就不會產生任何效果！

將可視區域相對單元的值變更為 1vw 或 100vw，即可變更字型大小與可視區域之間的確切關係。每增加 100px 的可視區域大小，1vw 字型就會增加 1px，而 100vw 字型的大小則會與可視區域完全相同。您可以變更該值，讓字型相對於瀏覽器放大或縮小的速度變慢或變快。但使用者放大或縮小時，任何與可視區域相關的值都會保持不變，完全不會回應使用者控制項。

同樣地，使用者預設 font-size 也不會計入 1vw 或 100vw 帳戶。

單獨使用視埠或容器相對單位，對使用者來說font-size一律是不友善的。如果 font-size 完全回應容器，就無法同時回應使用者預設值或調整項目。即使是出於善意並採取防護措施，也應避免最終font-size剝奪使用者的控制權。這不僅會造成使用者體驗不佳，還可能違反法律規定的無障礙指南。具體來說，《網頁內容無障礙指南》第 1.4.4 節規定「文字大小可放大 200%，且不需使用輔助技術」。

如何確保 font-size 值會因縮放而調整

如要確保與檢視區塊相關的 font-size 會因縮放而調整，必須將與檢視區塊相關的值套用為其他值的調整項。在 CSS 中，您可以使用 calc() 函式，或接受計算的任何其他數學函式 (例如 min()、max() 和 clamp())，font-size 的 calc(16px + 1vw) 是根據可視區域大小，以及像素目前的 (縮放比例相關) 大小而定。vw 單位不會受到縮放影響，但基準值會。

結果是 font-size，可同時回應可視區域大小和使用者的縮放設定。如果使用者縮放至 200%，基本值會以兩倍大小 (32px) 算繪，而回應式值則維持不變。1000px 可視區一開始會提供 font-size 的 16px + 10px = 26px，但字型大小只會放大到 42px，略大於 160%。200%這可能看似不是極端問題，但 font-size 越是根據檢視區塊，縮放功能就越不實用。

在小螢幕上，font-size 主要來自基本像素值，並會對縮放操作做出適當回應。但在大螢幕上，視埠大小會成為所算繪字型大小的較大比例，導致縮放效果不彰。當 500% 縮放 (大多數瀏覽器的上限) 無法再提供 WCAG 1.4.4 要求的字型大小 200% 增幅時，就會變得特別危險。但即使在達到這個程度之前，縮放功能失效也可能令人沮喪。

在圖表的左側邊緣 (0 可視區域寬度)，500% 縮放功能完全有效。不過，隨著瀏覽器大小增加，這種做法的效用會迅速下降，且 (無法縮放的) 可視區域單位在 font-size 中會成為較大的因素。當瀏覽器寬度為 2040px 時，字型大小最多只能放大 200%，500%超過這個值後，200%字型縮放功能將無法正常運作。

將這項計算移至 clamp() 函式，並設定最小值和最大值，即可強制執行界線，確保文字可縮放。根據 Maxwell Barvian 的說法：

如果最大字型大小小於或等於最小字型大小的 2.5 倍，則文字一律會通過 WCAG SC 1.4.4，至少在所有新式瀏覽器上都是如此。

由於 @media 和 @container 查詢與 vw 和 cqw 單位採用相同的測量方式，因此使用中斷點變更字型大小時，適用相同的邏輯。如果放大倍率過高，放大功能就會失效。您可以在下列視覺化圖表中，實驗這些值的互動方式：

如何確保 font-size 值會根據使用者預設值調整

但 calc(16px + 1vw) 仍不會回應使用者的預設字型設定。如要達成這個目標，請使用 em 或 rem 單位設定基準 (或最小值和最大值)，而不是 px。整合所有內容後，您會得到與連結的範例相符的結果：

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

請注意：

• 最小值和最大值都使用 em 單位，這類單位會根據使用者偏好設定 (並因應縮放比例) 調整大小。
• 額外 vw 值會盡量保持在最低限度，以免變焦功能受到過度影響。
• 最大值 (1.125em) 遠小於最小值 (1em) 的 2.5 倍，確保有效 font-size 值 200% 永遠可行。

搭配 pow() 的字體比例

大多數設計都會使用多種字型大小！排版比例說明多種字型大小之間的關係。這可以表示為基本大小和一系列乘數，用於計算其他大小。CSS 提供與 medium 關鍵字相關的內建排版比例，該關鍵字是指使用者的字型大小偏好設定，或預設的 16px。完整的關鍵字規模如下：

• xx-small：3/5 (0.6)
• x-small：3/4 (0.75)
• small：8/9 (0.89)
• medium：1 (其他大小的倍數)
• large：6/5 (1.2)
• x-large：3/2 (1.5)
• xx-large：2/1 (2)
• xxx-large：3/1 (3)

這個比例是相對於使用者預設值，而非根目錄 font-size，因此一旦變更網站的根目錄 font-size，這個比例就不太適用。大多數作者最後都會使用自訂屬性重新建立類似的型別比例，有時會使用相同的 T 恤尺寸名稱，有時則偏好數學比例的一系列遞增和遞減步驟。有許多第三方工具可根據常見比例生成這些音階，這些比例大多是從西方音樂音階借用而來：

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

不過，您不需要使用外部工具，即可在 CSS 中建立自己的比例尺，因為新的 pow() 函式可以為您產生比例尺，並以 1rem 做為自己的基本大小！

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

您不必使用整步來保持音階一致。事實上，常見的 12pt 字體排版比例每一步驟大約使用 5 個分數。這裡的大型尺寸使用比例尺中的完整步驟，小型尺寸則使用分數，以較慢的速度縮放。

CSS 混合和函式可進一步壓縮該邏輯，而 progress() 等其他內建工具則可輕鬆建立比例，從一個值流暢地調整至另一個值。但這些功能不在本示範的範圍內。

回應網頁內容器的大小

您可以在容器查詢中使用 cqi 單位取代 vw 或 vi，讓所有這些計算作業都能正常運作，但同時也建議在 html 元素上保留使用者的 font-size，這樣每個排版容器都能以 1rem 形式參照該使用者偏好設定。在示範中，您會發現整個字體比例會套用至 body，而非全域字體的根 html 元素，然後根據每個具有 type-set 屬性的元素容器大小重設。

這項功能一律會與容器相對字型大小相互取捨。您可以在環境中為每個元素設定更流暢的字型大小，但會犧牲網頁整體的字型一致性。具體取決於您的用途。請注意，流暢排版本身就是一種取捨，會導致縮放等使用者控制項的效果變差！

雖然回應式排版和排版比例是設計師的絕佳工具，但如果不需要，不必將事情複雜化。使用者預設和內建的型別比例也是不錯的選擇！但如果您選擇回應式 (或流動式) 字體，請務必測試結果在不同使用者預設值和縮放設定下的行為。歡迎多加利用！