直接改html元素的font-size配合rem单位是最稳、最可维护且易响应用户偏好的方式；需统一用rem设置所有文字相关尺寸，加媒体查询与@media print重置，并限制缩放范围保障可读性与布局稳定。
直接改 html 元素的 font-size，配合 rem 单位重排所有文字，是最稳、最可维护、也最容易响应用户偏好的方式。别在每个标签里手动加 px 或用 zoom 硬缩放。
为什么不能只调 p 或 section 的 font-size
简历里有标题、时间、技能条、项目描述，每类内容字号逻辑不同。如果只改某个标签，比如把 h2 设成 1.6rem，但 body 还是默认 16px，那 em 和 line-height 就会脱节；更麻烦的是，打印时浏览器可能忽略局部样式，导致 PDF 字号又缩回原始大小。
真正起效的，是让整个排版系统“感知”到字号变了——而这个锚点只能是 html 元素。
-
html { font-size: 18px; }→ 所有1rem都变成 18px，1.2rem就是 21.6px，自动连带line-height、padding、margin（只要它们也用rem） - 如果用
em，父级一变，子级嵌套两层后就难算清实际尺寸，比如section > ul > li > span的字体可能意外缩到 12px 以下 - 用
px写死所有字号，等于放弃缩放能力：用户开了系统“放大文本”，你的简历照样小得看不清
怎么安全地全局放大？三个必须做的动作
不是设个新值就完事。要兼顾可访问性、打印输出和移动端阅读，得闭环处理。
立即学习“前端免费学习笔记（深入）”；
- 初始声明写在
<style>里：html { font-size: 16px; }—— 别省略单位，IE 和旧 Safari 对无单位值解析不一致 - 所有文字相关尺寸统一用
rem：包括font-size、line-height（推荐无单位值如1.5）、margin、padding，例如h2 { font-size: 1.4rem; margin-bottom: 0.8rem; } - 加媒体查询兜底：
@media (max-width: 768px) { html { font-size: 14px; } }，避免手机上字太大撑破容器；别依赖 JS 动态监听resize，首次渲染就该定好
localStorage 记住用户选择，但别让它失控
很多人加了“放大/缩小”按钮，却没限制范围，结果用户一路点到 html { font-size: 48px; }，技能栏文字挤成一团，打印时第二页只剩一个句号。
- JS 控制入口必须走
document.documentElement.style.fontSize，而不是改body或某个 wrapper - 缩放步长建议用固定增量，比如每次 ±2px，而非 ±10% —— 百分比在低 DPI 屏上容易跳变
- 硬性限制：最小
12px（保障可读），最大20px（防布局断裂），超出则禁用按钮并设disabled+opacity: 0.5 - 记得在
window.addEventListener('DOMContentLoaded', ...)里读取localStorage并应用，否则刷新就回退
打印 PDF 前最容易被忽略的一件事
Chrome 打印预览里字体突然变小，不是 CSS 没生效，而是你忘了在 @media print 里重置 html 的 font-size。
浏览器打印时会重置部分样式，尤其当系统缩放或用户调过字号时，html 的内联 font-size 可能被忽略。解决方案很简单：
@media print {
html {
font-size: 16px !important;
}
body {
width: 210mm;
margin: 0 auto;
}
}
加上 !important 是为了覆盖 JS 设置的内联样式，确保导出 PDF 时字号稳定。顺带一提：中文简历务必用 @font-face 引入思源黑体或霞鹜文楷等开源字体，否则 PDF 里一堆“#”符号。
