断点值须基于设计稿实测内容撑开/挤下的临界宽度，如640px导航换行、960px主内容最大宽；必须用min-width且从小到大书写；tailwind的sm:表示≥640px，需移动优先；grid自适应时媒体查询仅用于布局质变；viewport必须设width=device-width。
断点值必须从你自己的设计稿里量出来，不是抄别人家的
直接套用 768px、1024px 这类“经典值”，最容易在 iPad Pro 横屏（逻辑宽度 1024px 但高 DPI）、折叠屏横竖切换时失效。真实项目里，断点应是你内容真正“撑不开”或“挤不下”的临界宽度。
实操建议：
- 打开 Chrome DevTools 的响应式调试模式，拖动窗口宽度，观察导航栏何时塌缩为汉堡菜单、卡片何时从三列变两列、文字何时开始换行
- 记下这些真实像素值，比如
640px（导航换行点）、960px（主内容区最大可用宽） - 把这些值转成
@media (min-width: 640px)，而不是反向把设计稿标注的「移动端 375px」硬套成断点起点
必须用 min-width，别碰 max-width 断点
max-width 容易导致区间重叠和隐性覆盖。比如 @media (max-width: 767px) 和 @media (max-width: 1023px) 同时匹配 768px–1023px 区间，浏览器取后者，但你可能本意是“只在这段单独处理”。
而 min-width 天然形成非重叠层级：
- 默认样式（无媒体查询）：适用于
0–639px -
@media (min-width: 640px)：生效于640px+，且后续断点会自然覆盖它 - 书写顺序必须从小到大，否则后写的低宽度断点会意外覆盖前面的高宽度规则
Tailwind 用户特别注意：sm: 不是“小屏”，是“≥640px”
很多人写 text-4xl sm:text-2xl，以为“小屏用大字”，结果是手机显示超大字体、平板反而缩小——因为 sm:text-2xl 编译为 @media (min-width: 640px)，意思是“≥640px 才启用 text-2xl”，它会覆盖基础类。
正确写法是移动优先：
- 基础类设小屏样式：
text-base - 再用
sm:text-lg、md:text-xl逐级增强 - 类名顺序不影响优先级，Tailwind 内部按断点层级生成 CSS，
sm:总在基础类之后
Grid 布局下，断点要跟着 minmax() 节奏走
如果你用了 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，那 Grid 本身就能在 300px、600px、900px 等位置自动调整列数。这时候再加 @media (min-width: 768px) { grid-template-columns: 2fr 1fr } 就是冗余，还可能破坏自适应逻辑。
媒体查询只该用于“质变”场景：
- 从单列 stack 切到双栏 inline-grid
- 侧边栏从隐藏变为固定宽度（如
300px） - 调整
gap或grid-auto-flow，而不是重复定义列轨道 - 避免在
min-width: 768px里写grid-template-columns: 200px 1fr，否则小屏下那个200px列还在，只是被压成一条线，还占着网格线
最常被忽略的一点：viewport 设置没配对，再准的断点也白搭。<meta name="viewport" content="width=device-width"> 必须存在，否则 iOS Safari 会以 980px 渲染，min-width: 640px 根本不会触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
