双栏简历需用 flex 布局实现响应式，但打印时必须用 @media print 强制单列、禁用 flex: 1、改用 grid 或 column、限定系统字体、内联 SVG 图标，并通过 Print 预览模式提前验证分页与字体。
用 flexbox 布局实现双栏结构，但别在打印时崩掉
响应式简历最常卡在“桌面两栏、手机单栏”这个切换上。很多人直接套用 display: flex + flex-wrap，结果 PDF 导出时第二栏内容被切到下一页，或者文字挤成一团。
关键不是“能不能响应”，而是“响应后是否还能稳定打印”。flex 在屏幕端表现好，但浏览器的打印引擎对弹性布局支持不一致，尤其遇到 min-width 或 flex-basis 混用时容易失效。
- 桌面端用
display: flex，但给主容器加flex-direction: column的媒体查询回退（@media print里强制单列） - 避免用
flex: 1占满剩余空间——它在打印时可能被解释为“无限高”，导致分页断裂 - 两栏内容高度差异大时，宁可用
grid配合grid-template-areas，语义更可控，打印兼容性也比flex稍好
@media screen 和 @media print 必须分开写，不能共用一套样式
很多人把响应式和打印样式混在一起写，比如：
@media screen and (max-width: 768px), print { ... }
这会导致手机上看正常，但导出 PDF 时字体变小、边距消失、图标不显示——因为 print 媒体类型默认禁用背景图、忽略非系统字体、重置所有 box-shadow 和 transform。
立即学习“前端免费学习笔记（深入）”；
-
@media print里只保留font-family（推荐"Helvetica Neue", Arial, sans-serif）、line-height、margin、page-break-inside: avoid - 中文必须显式声明
font-family，否则某些 PDF 工具（如 Chrome 打印）会 fallback 到无衬线黑体，造成字重发虚 - 所有图标用 SVG 内联，别用字体图标（
@font-face在打印中大概率失效）
移动端适配不是“加个 viewport 就完事”
加了 <meta name="viewport" content="width=device-width, initial-scale=1"> 只是起点。真实问题出在：小屏上标题太大、行高太密、左右留白过宽，导致可读性下降。
- 用
rem而非px控制字号和间距，根元素font-size按屏幕宽度动态调整（例如html { font-size: clamp(14px, 2.5vw, 16px); }） - 避免固定高度容器（
height: 200px），改用min-height+padding组合，防止内容溢出或留白过大 - 电话、邮箱等联系信息用
<a href="tel:..."></a>和<a href="mailto:..."></a>，iOS/Android 会自动触发拨号或邮件客户端，这是移动端简历的真实价值点
导出 PDF 前必须验证三件事：分页、字体、链接
Chrome 浏览器打印 → “另存为 PDF” 是最常用路径，但它对 HTML/CSS 的解析有隐藏限制。很多简历在屏幕上看着完美，PDF 里却出现第一页空白、超链接失效、中文断行错乱。
- 用
page-break-before: always强制分页的位置要避开浮动元素或绝对定位块，否则 Chrome 会忽略 - 所有中文字体必须用系统自带字体栈，例如：
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;；Web 字体（如 Google Fonts）在离线 PDF 中不会加载 - 导出前在 Chrome 开发者工具里切换到 Print 预览模式（
Ctrl+Shift+P→ 输入 “Rendering” → 勾选 “Emulate CSS media type: print”），比直接打印更早发现问题
