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

你是否有想過,能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size?答案是可以的!只要設定字體的最大值和最小值就可以辦到。

responsive max font size

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

為何使用 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() 就能達到一樣的效果。



留言

這個網誌中的熱門文章

運用資料層 dataLayer.push 建立 GTM 自訂事件

Google Search Console 網頁發現方式多了「參照網頁」