用CSS的 min() max() 與vw，設計有極限值的RWD響應式文字

你是否有想過，max/min font size 的解法？能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size？答案是可以的！

文章目錄：

• vw 基本運用
• 極限問題
• Media Query
• max()、min()、clamp()

If you just want the best solution, just click "max()、min()、clamp()".

為何使用 vw？

在編寫 CSS 的時候，你可能習慣將網頁上的字體大小(font-size)使用 rem、em、px 等單位設定，但在講究 RWD 的情況下，甚至是 Google SEO 著重在手機介面的現在，總是會遇到桌機看起來很舒適，但畫面一變小，標題類的字就又太佔版面。

而使用 viewport width (vw) 當作字體大小的單位，就可以讓字體隨著視窗寬度的不同自動縮放其大小。

各瀏覽器支援 vw 的情況

vw 基本運用：

vw 是視窗寬度的百分比，所以 1vw = 1%的視窗寬度。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。

h1,.h1{
  font-size: 1.5vw;
}

除了直接運用之外，也能搭配 calc 使用：

h1,.h1{
  font-size: calc(10px + 1.5vw);
}

極限問題（max or min font size）

這是不管設計什麼東西都存在且必需要考慮的事情，vw 也不例外。

設計網頁一定會設一個網頁寬度，以此寬度設定做為最大值；而人的視力有限，以 16px 當作最小值。所以，當視窗被拉到極大或極小的時候，以 vw 為單位的字體勢必會變成你不想要的樣子，這時候我們就必需設定最大值和最小值，讓字體在合理的區間變動，而 media query 和 min()、max()就出現在解決辦法的清單之中：

Media Query

下面為使用的例子：

h1,.h1{
  font-size: 3.5vw;
}
@media (min-width: 1600px) {
  h1,.h1{
   font-size: 40px;
  }
}
@media (max-width: 480px) {
  h1,.h1{
   font-size: 16px;
  }
}

這樣子設定就能避免字體過大或過小，造成使用者體驗不佳的情況。

進階設定：使用 max() min()或clamp()

用 media query 確實解決了問題，但實在是太麻煩了，光一個設定就多寫好幾行字，不如直接使用別的 CSS 語法 min()、max()。以下面的原始碼為例：

h1,.h1{
  font-size: 24px; /* for IE */
  font-size: min(max(3.5vw, 16px), 40px);
  
  /* or you can use: */
  clamp(16px, 3.5vw, 40px);
}

第一個 font-size 是確保瀏覽器不支援的話，還有一個基本設定(但IE已經不存在了，可視情況不用寫第一行)。

而第二個 font-size 的意思是字體大小 3.5vw、最小值 16px、最大值 40px。是不是比使用 media query 解決還乾淨多了？

無法理解的話也沒關係，直接用 clamp() 也可以，非常淺顯易懂，範例也一樣是字體 3.5vw、最小值 16px、最大值 40px。

不必有哪一種寫法比較高尚的想法，自己用的順手最重要！

各瀏覽器支援 clamp(), min(), max() 的情況

Sass 與 SCSS

若平常習慣用 Sass 或 SCSS 編寫的話，要注意不能直接寫 min 或 max，必需額外使用 #{} 把單字區隔開，否則會出現錯誤宣告。在這種情況下，用 clamp() 會比較簡便。

h1,.h1{
  font-size: m#{i}n(m#{a}x(9vw, 2.5rem), 5rem); /* complicated */
  font-size: clamp(2.5rem, 9vw, 5rem); /* smoother */
}

這樣子的設定用了好一段時間，並沒有碰到什麼問題。而平常不使用 clamp() 是我自己本身的習慣，畢竟利用 min() 和 max() 就能達到一樣的效果。