批量调整文字大小应优先在body设基准字号(如16px),再按语义层级用rem微调;rem相对根元素缩放,改html font-size可全局联动,但需规避与第三方组件冲突及固定尺寸场景。

用 font-size 在外部 CSS 里统一控制文字大小
直接改 HTML 标签的 style 属性只能单点调整,维护成本高;真正批量调文字大小,必须靠外部样式表里的 font-size 规则。关键不是“怎么写”,而是“写在哪”和“写多细”。
推荐优先在 body 上设基准字号,再按语义层级微调:
-
body { font-size: 16px; }—— 大多数浏览器默认值,兼容性稳 -
h1 { font-size: 2rem; }—— 相对body倍数缩放,响应式友好 -
p, li, td { font-size: 1rem; }—— 统一正文流内容,避免遗漏 - 慎用
html { font-size: 62.5%; }这类“为 rem 服务”的全局缩放,容易和第三方组件冲突
为什么用 rem 比 px 更适合批量调整
rem 是相对于根元素(html)的字体大小,只要改一处 html 的 font-size,所有 rem 单位的文字会联动缩放;而 px 是绝对单位,每个选择器都得单独改。
但注意:不是所有地方都适合 rem —— 比如图标字体、固定高度的按钮内边距,用 px 或 em 反而更可控。
立即学习“前端免费学习笔记(深入)”;
- 批量调大整体文字?改
html { font-size: 18px; }最快 - 只调正文不碰标题?那就别碰
html,只调body和段落类选择器 - 用户系统字号放大(如 Windows 缩放 125%),
rem会继承,px不会 —— 这既是优势也是干扰点
遇到文字没变大?检查这三处常见断点
写了 CSS 却没生效,大概率不是语法错,而是被更高优先级规则覆盖或加载顺序问题。
- 浏览器开发者工具里看元素计算后的
font-size值,确认是否真被你的 CSS 设置了 - 检查外部样式表是否成功加载(Network 面板看 CSS 文件状态码是不是 200)
- 有没有内联
style="font-size: 12px;"或!important规则强行锁死字号?它们优先级高于外部样式表 - 某些 UI 框架(如 Bootstrap)自带
font-size重置,需用更具体的选择器覆盖,比如body p.text-muted而非仅p
移动端适配时 font-size 的实际取舍
纯靠媒体查询调 font-size 容易写崩,尤其当页面含大量嵌套文本节点时。更稳妥的做法是:
- 基础层用
rem+html动态设置(例如 JS 根据屏幕宽度算出font-size) - 关键文案(如标题、按钮文字)额外加
min-font-size或clamp(),防 iOS Safari 小屏下过小 - 避免在
@media里逐个重写h1、p等 —— 改html或body一行顶十行 -
clamp(1rem, 2.5vw, 1.5rem)是目前最省心的响应式字号方案,但 IE 不支持,需备选
批量调文字大小这件事,本质是控制权的交接:把分散在 HTML 里的样式决定权,收回到 CSS 文件的某几行里。越晚动 html 的 font-size,后期适配越灵活;但越早统一好选择器范围,后续排查越省力。










