如何 - 响应式文本
了解如何使用 CSS 创建响应式排版。
你好，世界
调整浏览器窗口大小，查看字体大小如何缩放。
响应式字体大小
可以使用 vw 单位设置文本大小，这意味着“视窗宽度”。
这样文本大小将跟随浏览器窗口的大小
示例
<h1 style="font-size:8vw;">你好，世界</h1>
<p style="font-size:2vw;">调整浏览器窗口大小，查看字体大小如何缩放。</p>
自己尝试一下 »
视窗是浏览器窗口的大小。1vw = 视窗宽度的 1%。如果视窗宽 50 厘米，则 1vw 为 0.5 厘米。
使用媒体查询更改字体大小
您也可以使用媒体查询来更改元素在特定屏幕尺寸下的字体大小
可变字体大小。
示例
/* 如果屏幕尺寸为 601 像素或更宽，则将 <div> 的字体大小设置为 80 像素 */
@media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* 如果屏幕尺寸为 600 像素或更窄，则将 <div> 的字体大小设置为 30 像素 */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
自己尝试一下 »
提示： 转到我们的 CSS 字体教程 了解更多关于字体的知识。
要了解更多关于媒体查询的信息，请阅读我们的 CSS 媒体查询教程。
