如何创建 - 响应式文本
了解如何使用 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 媒体查询教程。
