优先用flexbox；两段式响应式履历页中，flexbox更轻量、兼容性更好，IE11不支持grid，且手机端默认column、中屏切row的流式切换更简洁可控。
响应式布局用 flexbox 还是 grid？
两段式（比如左侧简介 + 右侧经历）响应式履历页，flexbox 更轻量、兼容性更好，grid 虽灵活但 IE11 不支持 display: grid。如果你要兼容旧浏览器或快速上线，优先用 flexbox；如果只支持现代浏览器且需要复杂重排（比如手机端把“技能”提到“教育”前面），再考虑 grid。
实操建议：
- 用
display: flex包裹主容器，设flex-direction: column为默认手机样式 - 在中屏（如
@media (min-width: 768px)）切回flex-direction: row - 避免给子项写死
width: 300px，改用flex: 1或flex: 0 0 300px控制伸缩行为 - 别忘了加
box-sizing: border-box，否则 padding 会让宽度超限
viewport meta 标签漏写会怎样？
不加或写错 <meta name="viewport" content="width=device-width, initial-scale=1">，手机浏览器会按桌面宽度（通常是 980px）渲染页面，导致内容被缩得很小、文字看不清——这是新手最常踩的坑，不是 CSS 写得不对，而是根本没进响应式流程。
检查点：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须放在
<head>里，且在所有 CSS 引入之前 - 不要写成
content="width=320"这种固定值，它会让大屏手机也强行压缩 - 如果用了第三方字体或图标，加载慢可能导致闪动，可加
initial-scale=1.0明确锁定
文字断行和图片适配怎么不靠 JS 硬控？
响应式不是“等屏幕变小再用 JS 改 class”，而是靠纯 CSS 规则让元素自己适应。重点在两个地方：
- 长英文简历名或链接容易撑破容器，加
word-break: break-word或overflow-wrap: break-word - 头像或证书图用
max-width: 100%+height: auto，禁用width: 100%（否则拉伸变形） - 用
font-size: clamp(1rem, 2.5vw, 1.5rem)替代媒体查询做流体字号，更简洁（注意 Safari 14.1+ 才完全支持） - 避免用
background-image做头像——无法设置alt，也不响应缩放；改用<img>标签
为什么本地双击打开 HTML 看不到响应效果？
Chrome/Firefox 直接双击打开 file:// 协议的 HTML 文件时，部分 CSS 特性（尤其是 @supports 检测或某些 vh 计算）行为异常，而且手机模拟器无法触发真实 viewport 行为。这不是代码问题，是协议限制。
正确做法：
- 用 VS Code 装
Live Server插件，右键 → “Open with Live Server”，起一个本地http://127.0.0.1:5500服务 - 或者命令行进目录后运行
python3 -m http.server 8000（Mac/Linux）或py -m http.server 8000（Windows） - 真机调试：电脑和手机连同一 Wi-Fi，启动服务后，在手机浏览器输入
http://[电脑局域网IP]:8000（如http://192.168.1.10:8000）
真正麻烦的不是写两段布局，而是确保每段里的文字、列表、链接在各种尺寸下都不溢出、不重叠、不丢失可访问性。这些细节不报错，但用户一划就卡住，得手动在多个尺寸下拖动窗口反复看。
