採用流體排版（Fluid Typography）意味著建立能適應各種螢幕尺寸的文字。隨著技術的不斷進步，各種形狀和尺寸的裝置層出不窮。作為一名前端開發人員，您必須建立能很好地適應各種螢幕尺寸的應用程式。流體排版設計將改善使用者體驗和可訪問性，本文將告訴你如何做到這一點。
老方法：媒體查詢
使文字響應的老式方法是使用媒體查詢。這是指標對不同的螢幕尺寸設定不同的斷點。為每個斷點指定一個特定的字型大小值。
下面的程式碼中有一個 h1 標題和一個段落。
<h1>Open Replay Blogger</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend, purus non bibendum sollicitudin. Neque dolor accumsan ligula, at tristique elit turpis eget tortor. Quisque interdum sapien vel mi lacinia laoreet. Vestibulum aliquam fringilla urna, ac condimentum justo suscipit id. Praesent ac sem eu ipsum volutpat feugiat. Proin suscipit ex sit amet viverra. Fusce in justo vitae tortor placerat tincidunt. </p>
下面的 CSS 程式碼示例顯示了三個斷點的媒體查詢。
/* Default styles */
h1 {
text-align: center;
width: 500px;
margin: 20px auto;
}
p {
text-align: justify;
width: 350px;
margin: 20px auto;
}
/* Media queries to create responsive text */
@media screen and (max-width: 600px) {
h1 {
font-size: 22px;
}
p {
font-size: 14px;
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
h1 {
font-size: 36px;
}
p {
font-size: 20px;
}
}
@media screen and (min-width: 1025px) {
h1 {
font-size: 72px;
}
p {
font-size: 36px;
}
}
在上圖中，您可以看到不同螢幕尺寸下的不同字型大小。
- 小於 600px 的螢幕：標題為 22px，段落為 14px。
- 螢幕介於 600px 和 1024px 之間：標題為 36px，段落為 20px。
- 螢幕大於 1025px：標題為 72px，段落為 36px。
使用媒體查詢的侷限性
使用媒體查詢可在一定程度上使文字具有響應性。但它仍有一些侷限性。
- 難以顧及所有螢幕尺寸：如今，使用者通過不同尺寸的裝置訪問應用程式，從最小的智慧手機到超寬螢幕，以及介於兩者之間的所有裝置。
- 例如，如果你希望螢幕尺寸為 400px 或更小的裝置的標題字型大小較小，比如 18px，你會怎麼做？螢幕尺寸為 800px 的裝置還需要不同的字型大小，比如 28px。這就需要再新增兩個媒體查詢。
- 為多個查詢維護程式碼是很困難的：編寫的媒體查詢越多，維護樣式表就越困難。隨著斷點數量的增加，程式碼也會越來越複雜。在更新或排除故障時，這將成為一項挑戰。
新方法：流體排版
如今，前端開發人員有了建立流體文字的新方法。其中兩種方法是使用視口單位（ vw 和 vh ）和 CSS clamp() 函式。
您將瞭解如何使用這兩種方法。以及為什麼一種方法比另一種方法更好。但在此之前，讓我們先來考慮一下讓型別流體化的一些優勢。
以下是實施流體排版不僅有利於終端使用者，而且有利於開發人員的一些原因。
- 改善使用者體驗：流體排版可使文字在不同尺寸的螢幕上都清晰易讀，視覺效果吸引人。這意味著使用者在使用應用程式時將獲得更加一致和愉快的體驗。
- 增強可訪問性：您可以避免出現文字過小或過大的情況。而且幾乎不需要手動調整文字。這有助於提高應用程式的可訪問性，尤其是對於視力有困難的使用者。
- 更大的設計自由度和靈活性：採用流體排版時，您可以擺脫處理預定義斷點的限制。您可以根據設計意圖，而不是死板的斷點，自由調整字型大小。
使用視口單位使文字流暢
視口單位（ vw 表示視口寬度， vh 表示視口高度）是實現流體排版的一種簡單方法。使用視口單位時，可以根據瀏覽器的視口設定字型大小。瀏覽器的視口是瀏覽器在使用者裝置上覆蓋的螢幕區域。
下面是一個使用視口寬度的演示。讓我們使用第一個示例中相同的 h1 標題和段落。
下面的 CSS 程式碼顯示了使用視口寬度新增字型大小值的過程。
h1 {
font-size: 10vw;
}
p {
font-size: 3vw;
}
如圖所示，通過 viewport width，您可以建立隨寬度變化而平滑縮放的文字。而這隻需要幾行程式碼。
這似乎是你應該一直使用的理想解決方案，對嗎？其實不然。原因就在這裡。
由於 vw 單位基於視口寬度，因此可能導致文字過小或過大。在很小或很窄的螢幕上，文字可能會變得太小，無法舒適地閱讀。另一方面，對於使用超寬螢幕的使用者來說，文字可能會變得過大。這也會造成佈局問題。
有一種更好的方法可以解決這些潛在問題。那就是使用 CSS Clamp() 函式。
如何使用 CSS clamp() 函式
CSS clamp() 函式可讓你設定字型大小值，以適應各種螢幕尺寸。它還允許你設定最小和最大字型大小值。
這意味著使用 clamp() 函式時，可以防止文字變得過小或過大。這有助於在響應性和可讀性之間取得平衡。並創造更好的使用者體驗。
clamp() 函式取三個值。
.text {
font-size: clamp(min-value, pref-value, max-value);
}
min-value是最小字型大小值。pref-value是首選的字型大小值。max-value是最大字型大小值。
下面我們來看一個使用 clamp() 函式設定字型大小的示例。
p {
font-size: clamp(26px, 5vw, 52px);
}
這裡的首選值是 5vw（視口寬度的 5%）。
但考慮到視口寬度為 400px 的情況。這意味著 5vw（400px 的 5%）是 20px。在這種情況下，5vw 的首選字型大小就是 20px。但瀏覽器會將字型大小設定為 26px，即最小值。
您設定的最小值和最大值就是邊界。請確保字型大小值不小於指定的最小值，或大於指定的最大值。或大於指定的最大值。
上面的示例提供了以畫素為單位的最小值和最大值。但一般認為最佳做法是使用相對單位，如 rem 。
相對單位（如 rem ）會根據使用者的偏好作出反應。如果使用者改變了瀏覽器的預設字型大小，文字也會隨之改變。
下面我們來看一個例子。
h1 {
font-size: clamp(3rem, 7vw + 1rem, 5rem);
}
p {
font-size: clamp(0.5rem, 2vw + 1rem, 4rem);
}
注：為首選值新增 rem 值可確保它響應使用者的首選。
實現流暢排版的工具
有時，為各種字型級別確定首選值以及最小和最大字型大小是一項挑戰。你可以花時間反覆試驗。或者，你也可以利用這些工具為你的字型建立一個流體比例。
應考慮的一些最佳實踐
以下是在應用程式中實施流體排版時需要考慮的一些最佳實踐。
- 徹底測試，防止意外行為：在部署之前，最好進行全面測試。在各種螢幕和瀏覽器上測試應用程式。這將有助於您發現並解決任何潛在問題。並確保您的流體型別按預期執行。
- 為不支援的瀏覽器新增回退：目前大多數瀏覽器都支援 CSS
clamp()函式。在撰寫本文時，瀏覽器對 clamp 的支援率為 94%。但您仍可以為可能不支援 clamp 的瀏覽器新增回退值。這將有助於提高應用程式的可訪問性。
小結
在本文中，您已經瞭解了使文字適應不同螢幕尺寸的各種方法。在應用程式中實施流體排版將使其更易於訪問。CSS clamp() 函式可以讓你擺脫僵化的媒體查詢。這不僅能改善使用者體驗，還能讓開發人員輕鬆維護程式碼。
評論留言