绿色个人简历HTML5模板采用语义化标签与CSS Grid实现双栏布局，左侧30%展示短内容，右侧70%承载长文本，通过@media print强制单栏并禁用背景色以保障A4打印效果，兼顾ATS识别与无障碍访问。
用 grid-template-columns 直接切左右两栏，别碰 float 或 table
双栏简历本质是「信息分组 + 视觉权重区分」，不是排版炫技。左侧放个人信息、技能标签、教育背景这类短内容，右侧放工作经历、项目描述等长文本——用 CSS Grid 一行定义列宽最稳：grid-template-columns: 30% 70%。百分比比 fr 单位更可控，尤其在打印 PDF 时不会退化成等宽列；gap: 2rem 统一控制间距，比手动加 margin 更可靠。
常见错误：用 float: left 搭双栏，结果小屏下内容错位、打印时右侧栏被截断；或者用 <table> 布局，导致移动端必须横向滚动。这些方案现在没理由再用。<ul>
<li>左侧容器不用设 <code>width，靠 Grid 列宽控制即可
position: absolute 或 transform，PDF 导出时大概率消失align-items: flex-start，否则两栏会被拉成一样高，反而难读
@media print 里必须重置 grid-template-columns，否则 PDF 会崩
Chrome “另存为 PDF” 不解析 fr 和 minmax()，直接忽略 grid-template-columns 定义，导致左右栏变等宽、日期被硬切到下一行、甚至整段经历跨页断裂。解决办法不是换布局，而是针对性补打印样式：
- 在
@media print块里把双栏强制切回单栏：grid-template-columns: 1fr - 给每段经历（比如
<section class="experience"></section>）加break-inside: avoid，防止被拆到两页 - 禁用所有背景色和边框：
* { background: transparent !important; }，不然 PDF 里全是黑块
测试前务必用 Chrome DevTools 切到 Print 预览模式（Ctrl+Shift+P → 输入 “Rendering” → 勾选 “Emulate CSS media type: print”），比反复导出快得多。
立即学习“前端免费学习笔记（深入）”；
语义化结构比视觉效果更重要：用对 <section></section> 和 <time></time>
简历不是纯展示页，ATS（简历筛选系统）和屏幕阅读器都依赖 HTML 结构。堆 <div> 再好看也没用，关键标签必须到位：<ul><li>每个大模块（教育、工作、技能）用 <code><section></section> 包裹，别用 <div class="section">
<li>时间字段必须用 <code><time datetime="2020-03">2020.03–2022.08</time>，ATS 才能识别年份区间
<a href="https://www.php.cn/link/17887856024f101676695944f1f6a26e">xxx@example.com</a>，手机点开直接调起邮件 App<ul></ul>，别用 <br>模拟换行——后者无法被辅助工具朗读，也难统一缩进
很多人为了“简洁”把所有内容塞进一个 <main></main> 里，结果 ATS 抓不到模块边界。结构清晰比配色高级管用十倍。
移动端适配只靠一个 @media (max-width: 768px) 不够
小屏不是简单“变单栏”，还有字体缩放、点击区域、白空间处理三类问题：
- 必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 默认按 980px 渲染，文字小得看不清 - 电话和邮箱链接加
tel:/mailto:协议，不然点不了；别用图片替代联系方式 - 长技能标签（如 “React + TypeScript + Next.js”）在窄屏上容易溢出，加
white-space: normal; word-break: break-word; - 避免用
font-size: 16px这种固定值，改用1.1em或1.05rem，让系统字号设置生效
真正麻烦的不是写响应式代码，而是测试——本地双击打开没问题，上传 GitHub Pages 后样式丢失，90% 是路径大小写不一致（Windows 不敏感，Linux 敏感），剩下 10% 是忘了加 viewport 声明。
