HTML简历应采用流式布局，用rem、%、mm等相对或物理单位适配多端，禁用固定像素值；打印以A4（210mm×297mm）为基准，需设置@media print和break-inside: avoid防分页截断。
HTML简历不需要固定“分辨率”，它本质是流式布局，靠 CSS 媒体查询和相对单位（rem、%、vh）适配不同设备。强行设成某个像素值（比如 1920×1080）反而会导致在手机上横向溢出或缩放失真。
打印时以 A4 尺寸为基准，不是屏幕分辨率
HR 最常做的是把 HTML 简历打印出来——这时候起决定作用的是 CSS 的 @media print 规则和 A4 物理尺寸（210mm × 297mm），而不是屏幕像素。浏览器会按 CSS 中定义的 size: A4 或 width: 210mm; height: 297mm 来分页渲染。
- 直接在
@media print里写size: A4 portrait，比用像素更可靠 - 避免用
px设定容器宽高，改用cm或mm（如max-width: 17cm），CSS 打印引擎对物理单位支持更稳 - 别依赖
viewport的width=device-width控制打印输出——它只影响屏幕渲染
移动端适配关键不是“分辨率”，而是视口与字体可读性
手机上看简历，最常出问题的不是“分辨率不够”，而是文字太小、行距太挤、点击区域太窄。iOS Safari 和 Android Chrome 对 16px 以下字体默认放大，反而破坏排版。
- 基础字号设为
16px（不是14px或12px），配合line-height: 1.6保证可读性 - 用
rem而非em或px控制缩放一致性，根元素font-size可随viewport动态调整（例如媒体查询中设html { font-size: 14px; }） - 禁止写死
width: 375px这类值——手机型号太多，min-width和max-width配合%更安全
桌面端不用盯“1920×1080”，要防住 125%–150% 缩放
很多 HR 在 Windows 上用 Edge/Chrome 浏览网页简历时，系统缩放设为 125% 或 150%，此时若用 flex 布局但没设 min-width，内容会被硬挤到右侧切掉。
立即学习“前端免费学习笔记（深入）”；
- 给最外层容器加
min-width: 800px（不是 1200px），能兜住多数缩放场景下的可读宽度 - 避免
white-space: nowrap在标题或技能标签上滥用，否则缩放后整行溢出不可见 - 用
overflow-x: hidden要谨慎——它可能隐藏掉被挤出的关键信息，不如用word-break: break-word主动换行
真正容易被忽略的点：A4 打印时的“分页断裂”。哪怕所有 CSS 都写对了，<section></section> 末尾突然被截成半行，是因为没加 break-inside: avoid。这个属性不写，PDF 导出或打印时就大概率翻车。
