How TO - 響應式文字
瞭解如何使用 CSS 建立響應式排版。
你好世界
調整瀏覽器視窗的大小以檢視字型大小如何縮放。
響應式字型大小
文字大小可以用 vw 單位設定，它代表“視口寬度”。
這樣，文字大小將跟隨瀏覽器視窗的大小。
示例
<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">調整瀏覽器視窗的大小以檢視字型大小如何縮放。</p>
自己動手試一試 »
視口是瀏覽器視窗的大小。1vw = 視口寬度的 1%。如果視口寬 50 釐米，則 1vw 為 0.5 釐米。
使用媒體查詢更改字型大小
您也可以使用媒體查詢在特定螢幕尺寸上更改元素的字型大小。
可變字型大小。
示例
/* 如果螢幕尺寸為 601px 或更寬，則將 <div> 的字型大小設定為 80px */
@media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* 如果螢幕尺寸為 600px 或更窄，則將 <div> 的字型大小設定為 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
自己動手試一試 »
提示： 轉到我們的 CSS 字型教程以瞭解有關字型的更多資訊。
要了解有關媒體查詢的更多資訊，請閱讀我們的CSS 媒體查詢教程。
