大家都知道，一般常見的單位，如 px, em, rem，都不能讓字體大小隨著螢幕視窗的寬度縮放。因為即使是相對單位如 em, rem，實際上也是轉換成 px 以呈現之。

使用 vw 縮放字體尺寸

因此原本有跟大家介紹，可以改用 vw 來讓字體大小縮放，以下是以前做的簡易範例，可以開新視窗後縮放螢幕，觀看實際的效果。

使用 vw 的缺點

如果我們設定字體大小為 3vw：

.title {
	font-size: 3vw;
}

接著將螢幕縮小，從原本的 1024px 縮小到 500px，.title 的字體大小也會從原本的

1024px x 3vw = 30.72 px

變成

500px x 3vw = 15px

所以當螢幕縮小時，.title 也會跟著變小，因為影響數據的「寬度」變小了。

但這個設計有點不合常理，因為螢幕縮小，如果字體也跟著縮小，就會看不清楚，而且我們無法控制使用者的手機螢幕大小，假設有個使用者就是用了一台螢幕很小的手機，那 .title 的字可能會變成 12px 甚至更小，會看得非常不清楚。

反向計算 vw

因此當時，為了解決這個問題，我們思考了不同的解法。

如果我們改成，螢幕縮小時，使用 vw 讓字體放大呢？

▼ 可以注意到我在上面放的 codepen 範例，有一段使用 vw 單位的文字是綠色的，而縮放視窗時，那一段綠色的文字會變大

▼ 語法如下，搭配 calc() 與減法，就能得出相反的結果，也能讓視窗縮小時，文字變大

.title {
  font-size: calc(100px - 3vw);
}

但這個寫法有同樣的問題，第一：我們不知道使用者的螢幕多大，假設他的桌機尺寸非常大，就必須要用 media query 去設定斷點，限制這個 font-size 無限發展下去； 第二，我怎麼得出 100px - 3vw 的 100px 這個數字？

綜上所述，我們能得到初步結論，假設要使用 vw 當作字體尺寸單位，就必須要反覆在不同的裝置上測試，以求得最好的呈現效果。

使用 clamp() 讓 vw 進化

如果我們不想用 media query 設置很多斷點，去限制他的最大與最小值；也不想花成本在不同裝置上測試字體效果。那還有什麼方法呢？

我們可以改用 css 的函數 clamp() 來設定字體的最大最小值。

什麼是 clamp()

clamp() 的作用，是把一個「值」限制在一個範圍內(最大值 & 最小值)，當這個「值」超過該範圍時，就會在最大與最小值中，選擇一個值使用。

他接收三個參數：最小值，「值」(會變動)，最大值

CSS 語法：font-size: clamp(1rem, 2.5vw, 2rem);

我們現在知道 2.5vw 是個會變動的值，他會根據螢幕寬度不同而不同，因此我們就能把這個值限制在 1rem 以及 2rem 之間，超出範圍就會從 1rem 以及 2rem 則其一使用，如此再也不怕爆炸了。

使用 clamp() 搭配 vw 優化字體大小

假設今天的需求為：

• 字體最大值 48px
• 字體最小值 12px

我們可以這樣寫：

<style>
section {
  container-type: inline-size;
}
.min12max48 {
  --min-size: 12;
  --max-size: 48;
  --font-size: calc(
    (var(--min-size) * 1px) + 
    (var(--max-size) - var(--min-size)) * 
    ((100cqw - 320px) / (1920 - 320))
  );
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
</style>

<section>
  <div class="min12max48">
    vw 進化了！更好用的 CSS 自適應字體大小 / MUKI space*
  </div>
</section>

--font-size 變數功能

我用到了一個 --font-size 變數，他是一種根據容器大小調整字體大小的技巧，可以讓字體以線性方式慢慢放大縮小，較不會有突兀的感覺，通常用於 RWD。

container-type 與 cqw 是跟 container 有關的屬性與單位，簡單來說，就是利用 container-type 把父層變成 container(容器)元素，然後用 cqw 這個容器單位來計算，有興趣的朋友歡迎敲碗留言，有時間再寫一篇新文專門介紹 XDD

再來，數字 1920 是這個網站的最大寬度，通常會跟設計師搭配確定；320 則是網站的最小寬度，跟行動版尺寸有關，也是要跟設計師配合確定。

最後範例如下，可以開新視窗實際縮放瀏覽器寬度，就可以看到他是線性的放大縮小，而且我們有用 clamp() 設定上下限，就不怕字體大小爆炸了！

47

發生錯誤。