必须添加viewport meta标签，否则手机端文字过小；使用语义化标签如<section><header>提升ATS和屏幕阅读器兼容性；采用流式布局而非仅依赖媒体查询；导出PDF需专门编写@media print样式。
viewport 声明漏了，手机上文字小得根本没法读
本地双击打开 index.html 时，iPhone 或安卓 Chrome 里文字缩成针尖大小——这不是 CSS 写错了，是 HTML 头部缺了这行：<meta name="viewport" content="width=device-width, initial-scale=1">。没它，浏览器默认按 980px 宽度渲染，再缩放适配屏幕，字体自然被压扁。必须放在 <head> 里，且要在所有 <link> 和 <style> 之前。
用 <section> 别用 <div>，ATS 和屏幕阅读器都认这个
招聘系统（ATS）和视障用户依赖语义化标签识别内容结构。写 <div class="experience">，机器只当它是“一个盒子”；换成 <section><h2>工作经历</h2>...，就能准确提取标题和段落。实际操作中：
-
<header>包姓名、邮箱、电话——别藏在<div id="top">里 - 每块内容（教育、技能、项目）都用独立的
<section>，里面第一个子元素必须是<h2> - 避免嵌套超过三层，比如
<section><div><div><p>，会削弱语义权重
响应式不是靠媒体查询堆出来的，而是靠流式布局打底
很多人一上来就写 @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>，小屏自动折行 - 导航栏用
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 覆盖。
