(1) CSS 響應式設計-文字大小

前言

當我們設計一個響應式的網站時，除了版面隨著裝置大小不同，文字大小也會不同。例如手機板的文字應該就要比桌機版的文字來的小。這章節就介紹一些設定響應式文字的方法。

Media-query

使用media-query來設定不同裝置的文字大小，算是最常用的手法。
本系列範例皆以 scss 的寫法呈現。

h1 {
  font-size: 1rem;

  @media (min-width: 768px) {
    font-size: 2rem;
  }

  @media (min-width: 960px) {
    font-size: 3rem;
  }
}

VW

使用vw這個單位來設計，會隨著網頁縮放而改變尺寸，每1vw代表螢幕寬度的 1%。

h2 {
  font-size: calc(16px + 2vw);
}

上面我們用了 calc 語法，將16px + 2vw 作為文字大小。這樣做確保我們的文字最小是 16px，並且隨著螢幕越大，2vw的值也會越大，讓文字能隨螢幕縮放。

clamp

使用 clamp 語法來設計，clamp可以傳入三個值，讓我們設定最大和最小的值。

clamp(最小的值，我們希望的值，最大的值)

h2 {
  font-size: clamp(1.375rem, 0.875rem + 2vw, 2.25rem);
}

參考教學影片

響應式文字的單位

關於響應式文字的單位，盡量使用相對單位 rem 來設計。如果使用px這種絕對單位設計，會讓使用者無法在瀏覽器的設定中調整文字大小。