@media 仅是开关，真正实现多断点布局的是其控制的内容；应让 repeat(auto-fit, minmax()) 处理列数自适应，@media 仅用于结构级调整如 grid-template-areas 重排或 display 切换。
直接说结论：@media 本身不“实现”多断点布局，它只是开关；真正撑起多断点效果的是你用它去控制什么——多数人错把列数增减交给 @media，结果断点越多，页面越抖。
为什么写一堆 @media (min-width: 768px) 容易翻车
常见错误现象：窗口拖到 768px 那一刻，卡片宽度突然从 1fr 变成 300px，内容被挤压、文字换行、图片错位，肉眼可见“闪一下”。
- 根本原因：你把连续变化的容器宽度，硬切成离散断点，浏览器只能在断点触发时批量重排，中间无过渡
- 真实设备视口 ≠ 你的 Grid 容器宽度（比如后台系统里主内容区只占 800px，但你按
768px写断点，侧边栏还没收，主区先爆了） -
@media触发依赖视口，而用户可能缩放页面、用高 DPR 屏幕、开阅读模式——px断点会失效
repeat(auto-fit, minmax()) 才是列数自适应主力
它让浏览器每帧都重新计算能塞几列，不是靠断点“猜”，而是靠容器“量”。@media 在这儿只配打辅助。
- 必须确保父容器有明确宽度，比如
width: 100%或max-width: 960px，否则minmax()没法算最小轨道 - 选
320px、360px这类卡片实际最小宽度，不是设备宽度（别抄768px） - 用
auto-fit，不用auto-fill：前者收缩空白轨道，后者会留空列，造成右侧大片留白 - 搭配
gap: clamp(1rem, 2vw, 2rem)，比在每个@media里写三档gap更平滑
哪些地方真该用 @media 补刀
媒体查询不该调“量”，得改“质”——结构级变化无法靠 Grid 自动推导，必须人工干预。
- 移动端把
grid-template-areas: "header main aside"改成"header header" "main aside"（语义重排） - 侧边栏从并排变成堆叠在顶部，需重写
grid-template-rows和grid-template-columns - 小屏下隐藏次要区块：
.stats { display: none; }，桌面端才显示 - 调整
grid-auto-rows的最小高度，比如从minmax(100vh, auto)改为minmax(200px, auto)（防过矮拉伸）
断点值怎么定才不靠猜
别看 Bootstrap 文档，别背“768px 是平板”。你的真实断点，藏在设计稿和调试器里。
- 从设计稿反推：如果主内容区标注“最大宽度 960px”，就设
@media (min-width: 960px)，不是768px - 用 Chrome DevTools 拖动窗口，盯住布局开始难看的那个宽度——那个才是你的断点
- 单位优先用
em或rem，比如@media (min-width: 48em)，比px更适配用户缩放和高 DPR - 现阶段别碰
@container：仅 Chrome 117+、Safari 16 支持，兼容性风险大
最常被忽略的一点：你写的每一个 @media，都在增加渲染路径分支。列数交给 auto-fit，结构交给 @media，二者职责切清，才能既稳又轻。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
