必须写对viewport meta标签，否则所有响应式代码均失效；标准写法为，须置于最顶部，缺一不可且不可动态插入。
viewport meta 标签必须写对位置和参数
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，其他所有响应式代码都白搭。浏览器默认按 980px 渲染，@media 规则根本不会触发。
常见错误现象包括：页面在手机上显示极小、需双指放大才能阅读；开发者工具里拖动宽度，样式完全不响应；桌面端正常，移动端所有断点都不生效。
- 必须放在
内，不能塞进或注释后 -
width=device-width是硬性要求，写成width=375或漏掉会直接失效 - 别加
user-scalable=no——iOS Safari 某些版本下会让maximum-scale失效，伤害可访问性
现代主结构一律用语义化标签 + display: grid
用 position: absolute 做 header / main / aside / footer 整体排布，大概率导致定位错乱、响应式失效、屏幕阅读器语义崩坏。它只适合浮层、关闭按钮、下拉菜单这类脱离文档流的元素。
真正该用的结构代码极简：
<header>导航栏</header><main>主要内容</main><aside>侧边栏</aside><footer>页脚</footer>
CSS 主结构布局只需三行核心：
body {
display: grid;
grid-template-areas:
"header header"
"main aside"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 200px;
min-height: 100vh;
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
- 移动端适配只需加一条
@media (max-width: 768px)，把grid-template-columns改成1fr，三栏自动堆叠为单列 - 别用
display: block覆盖 Grid，那会破坏上下文，导致gap失效、子项拉伸失控 - IE11 兼容需回退写
grid-column-gap和grid-row-gap，但 2026 年绝大多数项目已无需支持
图片网格和多列内容优先用 grid-template-columns: repeat(auto-fit...
用 float 或 inline-block 排多图，容易塌陷、换行错乱、对不齐。Grid 是目前最直接可靠的解法。
四栏等宽响应式布局，HTML 不需要 wrapper 或 class 层级：
<div class="grid-4"> <div>栏目一</div> <div>栏目二</div> <div>栏目三</div> <div>栏目四</div> </div>
CSS 只需三行：
.grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
-
auto-fit+minmax(250px, 1fr)表示：每列最小 250px，剩余空间均分；小屏时自动减少列数，甚至退为单列 - 别用
repeat(4, 1fr)—— 那是固定四列，小屏下文字挤成窄条、换行错乱 - 图片记得加
width: 100%; height: 200px; object-fit: cover;保比例，再加loading="lazy"和显式width/height防布局偏移
flex 布局适合一维线性结构，但别滥用 flex: 1
顶部导航、垂直菜单、卡片列表这类一维结构，display: flex 更自然。但要注意 flex: 1 的副作用：它会让子项强行拉伸占满剩余空间，一旦内容高度不一致，就出现“底部对不齐”问题。
典型误用场景：
.nav { display: flex; }
.nav-item { flex: 1; } /* 错误：每个 item 强制等宽，文字长的会换行，短的留白 */
- 想让导航项自然等宽且不换行，改用
flex: 1 1 auto或更稳妥的flex: 1+min-width: 0 - 要做等高卡片列表，
flex-direction: column+height: 100%容易失控，不如用display: grid配合grid-auto-rows: minmax(200px, auto) - Flex 响应式切换重点不是“怎么写”，而是“在哪设断点”——观察内容何时自然折行，记下像素值（比如 624px），取整为 640px 比套用 768px 更可靠
实际项目里最容易被忽略的，是 box-sizing: border-box 的全局声明。漏掉它，width: 200px + padding: 10px 实际占 220px，三栏布局直接错位。这问题在调试时往往藏得深，直到换设备才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
