必须添加viewport meta标签，否则手机端文字过小；使用语义化标签如提升ats和屏幕阅读器兼容性；采用流式布局而非仅依赖媒体查询；导出pdf需专门编写@media print样式。
viewport 声明漏了，手机上文字小得根本没法读
本地双击打开 index.html 时，iPhone 或安卓 Chrome 里文字缩成针尖大小——这不是 CSS 写错了，是 HTML 头部缺了这行：<meta name="viewport" content="width=device-width, initial-scale=1">。没它，浏览器默认按 980px 宽度渲染，再缩放适配屏幕，字体自然被压扁。必须放在 里，且要在所有 <link> 和 <style></style> 之前。
用 <section></section> 别用 <div>，ATS 和屏幕阅读器都认这个
<p>招聘系统（ATS）和视障用户依赖语义化标签识别内容结构。写 <code><div class="experience">，机器只当它是“一个盒子”；换成 <code><section><h2>工作经历</h2>...</section>，就能准确提取标题和段落。实际操作中：
-
<header></header> 包姓名、邮箱、电话——别藏在 <div id="top"> 里
<li>每块内容（教育、技能、项目）都用独立的 <code><section></section>，里面第一个子元素必须是 <h2></h2>
- 避免嵌套超过三层，比如
<section><div><div>
<p>，会削弱语义权重
</p>
<h3>响应式不是靠媒体查询堆出来的，而是靠流式布局打底</h3>
<p>很多人一上来就写 <code>@media (max-width: 768px) { ... }，结果 PC 端改个 margin，手机端全乱。真正省力的做法是：
- 所有宽度用
max-width: 800px + margin: 0 auto 控制主体，别设 width: 100%
- 行高统一用
line-height: 1.6，字号用 1rem 或 1.1em，禁用 px
- 时间线、技能标签这类横向内容，用
display: flex; flex-wrap: wrap; 替代 <table>，小屏自动折行
<li>导航栏用 <code>position: sticky; 而非 fixed，否则 PDF 导出时会丢失定位
导出 PDF 时内容被截断或重叠，八成是打印样式没关照
Chrome “另存为 PDF” 默认忽略很多视觉样式，导致简历一页只印出半段经历。关键不是调 HTML 结构，而是加一段 @media print：
- 强制重置：
body { background: #fff !important; color: #000 !important; }
- 删掉所有干扰项：
box-shadow: none; border: none; text-shadow: none;
- 防分页撕裂：
section { break-inside: avoid; }，尤其对“工作经历”这种长区块
- 禁用浮动和绝对定位——PDF 引擎对
float 和 position: absolute 支持极差
最常被跳过的细节：PDF 模式下 vh 单位失效，所有高度相关样式（比如轮播图容器高）要单独用 px 或 em 覆盖。
<header></header> 包姓名、邮箱、电话——别藏在 <div id="top"> 里
<li>每块内容（教育、技能、项目）都用独立的 <code><section></section>，里面第一个子元素必须是 <h2></h2>
<section><div><div>
<p>，会削弱语义权重
</p>
<h3>响应式不是靠媒体查询堆出来的，而是靠流式布局打底</h3>
<p>很多人一上来就写 <code>@media (max-width: 768px) { ... }，结果 PC 端改个 margin，手机端全乱。真正省力的做法是：
- 所有宽度用
max-width: 800px+margin: 0 auto控制主体，别设width: 100% - 行高统一用
line-height: 1.6，字号用1rem或1.1em，禁用px - 时间线、技能标签这类横向内容，用
display: flex; flex-wrap: wrap;替代<table>，小屏自动折行 <li>导航栏用 <code>position: sticky;而非fixed，否则 PDF 导出时会丢失定位 - 强制重置：
body { background: #fff !important; color: #000 !important; } - 删掉所有干扰项：
box-shadow: none; border: none; text-shadow: none; - 防分页撕裂：
section { break-inside: avoid; }，尤其对“工作经历”这种长区块 - 禁用浮动和绝对定位——PDF 引擎对
float和position: absolute支持极差
导出 PDF 时内容被截断或重叠，八成是打印样式没关照
Chrome “另存为 PDF” 默认忽略很多视觉样式，导致简历一页只印出半段经历。关键不是调 HTML 结构，而是加一段 @media print：
最常被跳过的细节：PDF 模式下 vh 单位失效，所有高度相关样式（比如轮播图容器高）要单独用 px 或 em 覆盖。
