CSS响应式网页如何实现文字大小自适应_font-size rem和media queries配合

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS响应式网页如何实现文字大小自适应_font-size rem和media queries配合

2025-11-28

浏览次数：次

返回列表

通过rem与media queries结合实现文字自适应，rem是相对于根元素的字体单位，调整html的font-size可使全站文字等比缩放，示例中设置不同屏幕宽度下html的字体大小，如大于768px时为16px，小于768px时为14px，小于480px时为12px，h1使用2rem即对应32px、28px、24px，p使用1rem对应16px、14px、12px，从而实现响应式字体；建议采用移动优先策略，利用calc函数实现平滑过渡，并设定最小最大字体以保障可读性，注意控制html而非body的字体大小，合理设置断点并尊重用户系统设置，确保兼容性与可访问性。

css响应式网页如何实现文字大小自适应_font-size rem和media queries配合

在响应式网页设计中，文字大小的自适应是提升用户体验的关键之一。通过结合 rem 单位与 media queries，可以实现字体随屏幕尺寸平滑变化，适配手机、平板和桌面设备。

什么是 rem？

rem（root em）是相对于根元素（html）字体大小的单位。默认情况下，浏览器根字体大小为 16px，即 1rem = 16px。通过动态调整 html 元素的 font-size，所有使用 rem 的文本会等比缩放，非常适合响应式布局。

设置根字体大小并配合媒体查询

利用 media queries 检测屏幕宽度，在不同断点下设置 html 的 font-size，从而控制整个页面基于 rem 的文字比例。

示例代码：

<font face="Courier New">
html {
  font-size: 16px; /* 默认大小 */
}
<p>@media (max-width: 768px) {
html {
font-size: 14px;
}
}</p><p>@media (max-width: 480px) {
html {
font-size: 12px;
}
}</p><p>h1 {
font-size: 2rem; /<em> 实际为 2 × 当前根大小 </em>/
}</p><p>p {
font-size: 1rem;
}
</font></p>

这样，当屏幕变小时，根字体缩小，h1 和 p 等使用 rem 的元素也会自动按比例变小。