结论：@media (min-width: Npx) 是当前最可靠、最易维护的断点写法，优先使用它；因 min-width 天然形成非重叠区间、解析行为可预测，而 max-width 易漏边界、引发隐性覆盖，如 768–1023px 区间会同时命中多条规则导致样式错乱，且必须用整数 px 单位、升序排列、仅写变更属性。
直接说结论：@media (min-width: Npx) 是当前最可靠、最易维护的断点写法，优先用它，别碰 max-width 套叠或 orientation 主逻辑。
为什么必须用 min-width 而不是 max-width
因为 min-width 天然形成非重叠区间，浏览器解析行为可预测；max-width 容易漏掉边界值、产生隐性覆盖。比如写 @media (max-width: 767px) 和 @media (max-width: 1023px)，那 768–1023px 这段会同时命中两个规则，后写的覆盖前写的——但你根本没定义这个区间的全部样式，结果就是回退到上一级，布局错乱。
实际表现：iPad Pro 竖屏渲染宽度正好是 768px，如果断点写成 min-width: 769px，它就完全不生效；必须写 min-width: 768px 才能命中。
- 所有断点值必须是整数像素，且带单位（
px），漏写单位如--breakpoint-sm: 768会导致后续calc()失效 -
min-width按升序排列（0 → 768px → 1024px → 1280px），CSS 自上而下解析，后声明覆盖同优先级前声明 - 每个断点内只写「该区间需要变更」的属性，不要重复设全局已定义的字体、颜色等
@media 里能不能用 CSS 变量控制断点值？
不能。浏览器会静默丢弃整条 @media 规则——你写 @media (min-width: var(--breakpoint-md))，DevTools 里根本看不到这条规则，也不报错，只是失效。
立即学习“前端免费学习笔记（深入）”；
CSS 变量只能用在声明块内部，比如 margin: var(--space-md) 或 :root { --space-md: 16px; }。断点本身必须是字面量。
- 想统一管理断点数值？在
:root里定义语义变量（--breakpoint-md: 1024px），但每个@media仍得手动抄进去：@media (min-width: 1024px) - 构建工具（Sass/Tailwind）可以做变量替换，但纯 CSS 场景下没有自动代入这回事
- 别把断点塞进 JSON 配置再构建注入——改个值就得跑一遍构建，调试时连实时预览都做不到
移动端基线怎么设才不踩坑？
默认样式（不包任何 @media）就面向最小屏写，也就是「移动优先」。别写 @media (max-width: 767px) 单独处理手机，那是降级思维，容易在宽屏设备上因遗漏某层导致样式崩塌。
正确做法：基础样式保底小屏，再逐级向上增强。比如：
.container { width: 100%; padding: 16px; }
@media (min-width: 768px) { .container { max-width: 720px; margin: 0 auto; } }
@media (min-width: 1024px) { .container { max-width: 1140px; } }
- 断点值不是凭经验套 768/1024，而是根据设计稿标注的实际渲染宽度反推（Figma 里标「移动端 375px」，就从
min-width: 375px开始设平板适配） - 折叠屏、高 DPI iPad 等设备视口宽度可能和物理尺寸不一致，靠设备类型判断不如靠真实
innerWidth -
viewportmeta 标签必须存在且正确：<meta name="viewport" content="width=device-width, initial-scale=1">，否则@media读到的宽度是桌面默认 980px
真正麻烦的从来不是写几条 @media，而是断点值和设计稿、JS 逻辑、构建流程之间的同步——一旦有人改了 Figma 标注却忘了同步 CSS 里的像素值，问题就会藏到上线后才暴露。
