---

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

---

Hello World

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

亲自试一试 »

---

响应式字体大小

文本大小可以用vw单位设置，即"视口宽度"。

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

实例

<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> 亲自试一试 »

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

---

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

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

可变字体大小。

实例

/* 如果屏幕尺寸为 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 媒体查询教程。