如何創建：響應式文本

響應式字體大小

文本大小可以用 vw 單位設置，它的意思是“視口寬度”。

這樣，文本大小將跟隨瀏覽器窗口的大小：

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">請調整瀏覽器窗口的大小，看看字體大小是如何縮放的。</p>

親自試一試

注釋：視口是瀏覽器窗口的大小。1vw = 視口寬度的 1%。如果視口寬 50 厘米，則 1vw 為 0.5 厘米。

使用媒體查詢更改字體大小

您還可以使用媒體查詢來更改特定屏幕尺寸上元素的字體大小：

查看效果

/* 如果屏幕寬度為 601px 或更大，將 <div> 的 font-size 設置為80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* 如果屏幕寬度為 600px 或更小，請將 <div> 的 font-size 設置為 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

親自試一試

相關頁面

教程：CSS 字體

教程：CSS 媒體查詢