如何创建：响应式文本

学习如何使用 CSS 创建响应式排版。

Hello World

请调整浏览器窗口的大小，看看字体大小是如何缩放的。

查看效果

响应式字体大小

文本大小可以用 vw 单位设置，它的意思是“视口宽度”。

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

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">请调整浏览器窗口的大小，看看字体大小是如何缩放的。</p>

亲自试一试

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

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

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

可变字体大小。

查看效果

/* 如果屏幕宽度为 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 媒体查询