用 display: grid 可快速搭建语义清晰、响应式的博客首页骨架，通过 grid-template-areas 划分 header、main、aside、footer 区域，配合 minmax()、1fr 和 gap 实现自适应布局；文章卡片用 flex + aspect-ratio 保持比例，摘要用 -webkit-line-clamp 截断；小屏下仅需媒体查询重定义 grid-template-areas 即可完成侧边栏下移；暗色模式通过 prefers-color-scheme 和 CSS 变量实现，字体使用系统字体栈并以 rem 为单位统一缩放。
用 display: grid 快速搭出博客首页骨架
响应式博客首页的核心不是堆砌媒体查询，而是先用 grid 定义语义清晰的区域划分。主流浏览器都支持 grid，IE 已淘汰，不必为它降级写 float 或 inline-block。
关键点在于把页面拆成 header、main（含文章列表）、aside（侧边栏）、footer 四块，再用 grid-template-areas 命名布局：
.blog-layout {
display: grid;
grid-template-areas:
"header header"
"main aside"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr minmax(300px, 35%);
gap: 1.5rem;
}
注意：minmax(300px, 35%) 保证侧边栏最小宽度不塌缩，又不会在大屏上占满；1fr 主内容区自动撑满剩余空间；gap 替代传统 margin 控制间距更可控。
文章卡片用 flex + aspect-ratio 保持图文比例
博客首页每篇文章通常带缩略图、标题、摘要、元信息。如果靠 padding-top 做图片占位，代码冗长且难维护；用 aspect-ratio 是更现代、简洁的解法，Chrome 88+、Firefox 89+、Safari 15.4+ 均已支持。
立即学习“前端免费学习笔记（深入）”；
-
aspect-ratio: 16 / 9直接约束容器宽高比，内部图片设为width: 100%; height: 100%; object-fit: cover即可自适应 - 卡片整体用
display: flex; flex-direction: column，让标题、摘要、元信息垂直流式排列，避免浮动或绝对定位带来的脱离文档流问题 - 摘要文本用
display: -webkit-box; -webkit-line-clamp: 3; overflow: hidden截断三行，比 JS 计算字符数更轻量
侧边栏在小屏下自动移至主内容下方
不需要为每个断点写一堆 @media，直接用 grid 的响应式重排能力：
触网万能商城系统，3年专注打磨一款产品，专为网络服务公司、建站公司、威客、站长、设计师、网络运营及营销人员打造，是一款超级万能建站利器，彻底告别代码编程和找模板，改模板，改代码的低效高成本方式，仅需一个人可服务无数客户，系统集万能官网+万能商城+万能表单+博客+新闻+分销...于一体，通过海量模块拖拽布局、万能组合和超级自定义功能，可以构建各种类型的响应式网站。
@media (max-width: 768px) {
.blog-layout {
grid-template-areas:
"header"
"main"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
这里没改 grid-template-rows，因为 auto 和 1fr 在单列时依然生效；gap 保持不变，上下间距统一；aside 不需要额外 margin-top，grid 自动按区域顺序排列。
常见错误：有人在小屏里给 aside 加 position: absolute，结果导致内容不可读、焦点顺序错乱、打印样式失效——grid 重排是语义化移动，不是视觉欺骗。
字体与颜色适配系统偏好，不用 JS 检测暗色模式
用 @media (prefers-color-scheme: dark) 配合 CSS 自定义属性，既轻量又可靠：
:root {
--bg: #fff;
--text: #333;
--border: #eee;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #e6e6e6;
--border: #333;
}
}
body {
background-color: var(--bg);
color: var(--text);
border-color: var(--border);
}
别用 localStorage 存用户手动切换的暗色状态覆盖系统偏好——多数用户根本不知道这个开关在哪，强行覆盖反而造成体验割裂。真有“手动切换”需求，再叠加一层 JS 控制，但默认必须尊重系统设置。
字体方面，font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif 能自动匹配各平台系统字体，比硬写 "Helvetica Neue" 更稳；字号统一用 rem，根元素 font-size 在 @media 中微调即可，不用每个元素都写断点。
