应使用语义化HTML标签（如）搭建结构，并用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))实现自适应列数，配合viewport meta、alt属性和外链CSS，确保响应式真正生效。
直接用 <header></header>、<main></main>、<footer></footer> 搭骨架，配 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 实现自动列数切换，比套 Bootstrap 或写一堆 <div class="row"> 更轻、更可控、后期改起来不崩溃。
<h3>为什么不能从 <code><div id="header"> 开始写
<p>语义错位会连锁影响三件事：SEO 抓不到主标题层级、屏幕阅读器跳过导航、CSS 媒体查询失效（比如 <code>@media (max-width: 768px) nav ul 匹配不到，因为 <nav></nav> 被包在 <div> 里，没被识别为导航上下文）。
<ul><li>
<code><header></header> 必须是顶层块级容器，别嵌套在 <div> 里
<li>
<code><main></main> 全局只能出现一次，且必须包裹所有正文内容（包括文章列表和单篇正文）
<footer></footer> 要放在 <article></article> 包裹，别用 <section></section>——<section></section> 适合栏目分组，<article></article> 才表示独立可分发的内容单元
grid 布局怎么让博客列表在手机上自动变单列
关键不是“怎么写 Grid”，而是写对这行声明：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))。它会让浏览器在宽度 ≥300px 时尽可能多塞列，窄于 300px 就强制回退为 1 列，无需手动写多个 @media 断点。
- 必须加
gap: 1.5rem，否则卡片贴太近，移动端手指点不准 - 别给
<article></article>设height或min-height，摘要长度不一，固定高度会截断文字或撑开空白 - 如果要兼容 IE11，这条规则直接失效，得退回
display: flex; flex-wrap: wrap+ 手动设flex-basis -
minmax(300px, 1fr)中的300px不是拍脑袋定的——它约等于 iPhone SE 屏宽减去左右边距，再留出文字可读最小宽度
移动端适配常漏掉的三个 HTML 硬性配置
光靠 CSS 写再多 @media 都白搭，如果这三个 HTML 标签没写对，页面在手机上要么缩成一团，要么横向滚动，或者字体小到看不见。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1">必须有，且只能有一份，放在顶部 - 所有图片必须带
alt属性，哪怕空着（alt=""），否则禁用图片时整块留白，SEO 权重归零 - 不要在 HTML 标签里写
style="width:100%; max-width:1200px;"这类内联样式——它会覆盖外部 CSS 的媒体查询，导致断点失效
最易被忽略的是：响应式不是“让页面在手机上看清”，而是“让浏览器知道这块内容该以什么语义存在”。结构错了，后面所有 CSS 和 JS 都是在修补漏洞，而不是构建体验。
