用 CSS Grid 构建响应式主页应以 grid-template-areas 为主干布局，配合 minmax()、clamp() 和 :checked + ~ 实现无 JS 响应式导航与自适应排版，同时确保语义化结构合规。
用纯 CSS 搭建响应式个人主页，关键不在于写多少媒体查询，而在于是否从结构层就选对了布局模型——flexbox 或 grid 必须有一个作为主干，否则后期适配会反复推翻重写。
用 display: grid 规划整体页面骨架
别从 header、nav 一个一个浮动或定位堆砌。先定义页面级网格，把“头/侧边栏/主内容/页脚”抽象为区域名，用 grid-template-areas 统一声明：
body {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr;
min-height: 100vh;
}
这样做的好处是：后续只需改 grid-template-areas 字符串就能切换布局（比如小屏时改成 "header" "main" "nav" "footer"），不用动 HTML 结构或大量重写 CSS。
- 注意
min-height: 100vh是为了防止内容少时页脚塌陷，但 iOS Safari 旧版本对vh解析异常，可加height: 100%到html元素兜底 -
grid-template-columns: 200px 1fr中的200px不建议写死，更稳妥的是用minmax(200px, 25%)配合auto-fit - 区域名（如
"nav"）必须和对应元素的grid-area值完全一致，大小写和空格都不能错
导航栏在小屏下收起为汉堡菜单，但不用 JS 控制显隐
纯 CSS 实现折叠靠的是 :checked + ~ 选择器组合，核心是把 放在 和 之前，利用兄弟选择器控制 nav 的 max-height 和 opacity：
立即学习“前端免费学习笔记（深入）”；
#menu-toggle:checked ~ nav {
max-height: 300px;
opacity: 1;
transition: opacity 0.3s, max-height 0.3s;
}
nav {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: opacity 0.3s, max-height 0.3s;
}
常见错误是忘记设 overflow: hidden，导致 max-height 动画过程中内容溢出；或者把 transition 只加在 :checked 状态里，漏掉默认状态，造成“展开有动画、收起瞬间消失”。
@media 查询只改网格区域和尺寸，不动定位或浮动
响应式最易失控的点，就是大屏写一套 float，小屏又用 position: absolute 覆盖。正确做法是只调整 grid 相关属性：
- 小屏（
max-width: 768px）下把侧边栏移到主内容下方：grid-template-areas: "header" "main" "nav" "footer" - 取消固定列宽，改用
grid-template-columns: 1fr - 若头图需全宽，给
header加grid-column: 1 / -1，让它横跨所有列 - 避免在媒体查询里出现
float、clear、position等传统布局声明，它们和grid冲突且不可预测
真正需要额外处理的只有字体大小、行高、内边距等视觉细节，这些可以单独抽成 clamp() 函数或 CSS 自定义属性，例如：font-size: clamp(1rem, 4vw, 1.25rem)。
最后提醒一句：所谓“初级项目”，最容易被忽略的是语义化与可访问性——nav 标签要包住导航链接，main 要有 role="main" 或直接用 ，否则屏幕阅读器无法识别主内容区域。样式再漂亮，结构不合规，就不算完成。
