如何操作 - 响应式文本

了解如何使用 CSS 创建响应式排版。

你好世界

调整浏览器窗口大小以查看字体大小如何缩放。

亲自试一试 »

响应式字体大小

文本大小可以通过设置vw单位，表示"viewport width"。

这样，文本大小将跟随浏览器窗口的大小：

示例

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>

亲自试一试 »

视口是浏览器窗口的大小。 1vw = 视口宽度的 1%。如果视口宽 50 厘米，则 1vw 为 0.5 厘米。

使用媒体查询更改字体大小

您还可以使用媒体查询来更改特定屏幕尺寸上元素的字体大小：

可变字体大小。

示例

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}

亲自试一试 »

提示：转到我们的 CSS 字体教程了解有关字体的更多信息。

要了解有关媒体查询的更多信息，请阅读我们的CSS 媒体查询教程。