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 媒体查询教程。
