单页简历响应式核心是确保内容在任何设备上不溢出、不缩放、不被ATS过滤；需正确设置viewport、使用语义化标签、相对单位（rem）、打印媒体查询等。
单页简历用 HTML 实现响应式，核心不是“怎么让页面动起来”，而是“怎么让内容在任何设备上不溢出、不缩成小点、不被 ATS 过滤掉”。只要 viewport 没写对、font-size 用了 px、section 套了 div 再加 float，手机打开就基本废了一半。
viewport 元标签漏写或写错
这是本地双击打开 index.html 后文字极小、横向滚动条莫名出现的头号原因。不是 CSS 没生效，是浏览器压根没按设备宽度解析页面。
- 必须写在
<head>里，且只能有一条：<meta name="viewport" content="width=device-width, initial-scale=1"> - 别写成
content="width=375"或user-scalable=no——后者会禁掉 pinch-zoom，ATS 和 HR 都可能手动放大看细节 - GitHub Pages 部署后仍异常？检查文件是否保存为 UTF-8 无 BOM，BOM 会导致该标签被前端忽略
用语义化标签替代 div 堆砌
很多模板用一堆 <div class="section-work"> 包工作经历，结果小屏下内容挤成一团、打印 PDF 时全叠在一起。语义标签本身不带样式，但能触发浏览器默认行为（比如 section 在打印时自动分页）。
-
<header>只包姓名、职位、邮箱、电话——别塞导航栏进去 - 每个模块用
<section><h2>工作经验</h2>...</section>，h2是唯一允许在section内作为标题的层级 - 技能列表优先用
<dl><dt>JavaScript</dt><dd>ES6+、DOM 操作</dd></dl>，比table或flex更稳：小屏自动换行，打印时不撑宽
字号和行高必须用相对单位
写 font-size: 16px 看似稳妥，但在 iPhone Safari 里会被强制缩放；line-height: 24px 则会让多行文本间距崩坏。
立即学习“前端免费学习笔记（深入）”；
- 根字号统一设为
html { font-size: 100%; }，然后所有字体用rem：h2 { font-size: 1.5rem; } - 全局行高用无单位数值：
body { line-height: 1.6; }——它会乘以当前字号，而不是固定像素 - 避免
em嵌套场景（如section > p > span），容易指数级放大；rem始终相对于根元素
打印 PDF 时内容截断或背景消失
Chrome “另存为 PDF” 不是截图，而是一套独立渲染流程。它默认关闭背景、忽略 position: fixed、对 flex-wrap 支持有限。
- 加
@media print规则，重置关键属性：background: #fff !important; color: #000 !important; box-shadow: none; border: none; - 删掉所有
position: fixed（比如悬浮导航）、float、transform——PDF 引擎几乎不支持它们 - 长内容（如项目描述）用
page-break-inside: avoid;防止段落被切在两页中间
真正卡住人的从来不是“怎么加动画”或“怎么配色”，而是 viewport 写错一行、font-size 用错单位、section 里塞了 table——这些错误不会报错，但会在 HR 打开手机查看的 3 秒内，直接决定简历是否被滑走。
