在响应式网页开发过程中，文字大小的自适应适配是提升多终端用户体验的关键环节。不同设备的屏幕尺寸差异极大，从手机到平板再到桌面显示器，固定的px单位文字很容易出现小屏显示过大、大屏显示过小的问题，而结合rem单位和media queries媒体查询可以很好地解决这个问题。
核心原理说明
rem是CSS中相对根元素<html>字体大小的单位，1rem等于根元素当前的font-size值。比如根元素font-size设置为16px，那么1rem就等于16px，2rem就是32px。media queries可以检测设备的屏幕宽度，在不同宽度区间设置不同的根元素font-size值，这样所有使用rem单位的文字都会跟随根元素字体大小的变化而自动调整，实现文字的自适应效果。
基础实现步骤
1. 设置初始根元素字体大小
首先需要给<html>元素设置一个基础的font-size值，这个值会作为默认屏幕尺寸下的基准值。通常我们会把基准值设置为和浏览器默认字体大小一致，也就是16px，方便计算。
/* 基础根元素字体大小设置 */
html {
font-size: 16px;
}
/* 文字使用rem单位 */
.text-content {
font-size: 1rem; /* 对应16px */
line-height: 1.5rem; /* 对应24px */
}
2. 添加media queries适配规则
通过media queries设置不同屏幕宽度区间对应的根元素font-size值，一般我们会按照常见的设备断点来划分区间，比如手机端、平板端、桌面端等。
/* 屏幕宽度小于768px 手机端 */
@media screen and (max-width: 767px) {
html {
font-size: 14px;
}
}
/* 屏幕宽度768px到1024px 平板端 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
html {
font-size: 16px;
}
}
/* 屏幕宽度大于1024px 桌面端 */
@media screen and (min-width: 1025px) {
html {
font-size: 18px;
}
}
3. 页面文字统一使用rem单位
设置好根元素和媒体查询规则后，页面内所有需要自适应的文字都使用rem单位定义font-size，这样当屏幕宽度变化触发媒体查询时，根元素font-size改变，所有文字的大小会自动跟随调整。
/* 标题文字 */
.page-title {
font-size: 2rem; /* 桌面端对应36px 平板端对应32px 手机端对应28px */
}
/* 正文文字 */
.page-paragraph {
font-size: 1rem; /* 桌面端对应18px 平板端对应16px 手机端对应14px */
}
/* 小号提示文字 */
.tip-text {
font-size: 0.875rem; /* 桌面端对应15.75px 平板端对应14px 手机端对应12.25px */
}
进阶优化方案
使用动态计算根元素字体大小
上面的方案是固定断点调整，还可以结合vw单位实现更平滑的适配，根据屏幕宽度动态计算根元素的font-size值，不需要设置多个媒体查询断点。
/* 以设计稿宽度750px为基准 根元素字体大小 = 屏幕宽度 / 10 */
html {
font-size: calc(100vw / 10);
}
/* 限制最大和最小字体大小 */
@media screen and (max-width: 320px) {
html {
font-size: 32px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 75px;
}
}
注意事项
- 不要给根元素设置小于12px的font-size值，部分浏览器会限制最小字体显示，导致适配失效。
- 不需要自适应的固定大小文字可以继续使用px单位，比如一些固定的图标旁文字。
- line-height如果使用rem单位，会和font-size保持同步缩放，也可以根据需求使用无单位的数值，比如line-height: 1.5，会基于当前元素的font-size计算行高。
- 如果页面有用户自定义字体大小的需求，需要避免根元素font-size设置影响用户的自定义设置，可以结合prefers-reduced-motion等媒体查询做兼容处理。
常见问题解答
为什么不用em单位？
em单位是相对于父元素的字体大小，嵌套层级多了之后计算会非常复杂，而rem始终相对于根元素，计算逻辑更简单，更适合全局文字适配。
媒体查询的断点怎么设置？
断点可以根据实际项目的用户设备分布来设置，也可以参考常见的断点值：320px（小屏手机）、375px（普通手机）、768px（平板）、1024px（小桌面）、1200px（大桌面），不需要设置过多断点，避免CSS文件过大。
CSS响应式网页font-sizeremmedia_queries修改时间：2026-07-04 11:36:26