应使用实际布局断裂点的宽度值而非 device-width 或 screen-spanning；通过 DevTools 拖动窗口观察 nav-collapse、content-wrap、sidebar-show 等真实临界宽度，用 min-width 从窄到宽逐级定义断点，并优先对字体等连续属性用 clamp() 实现平滑响应。
为什么不能用 device-width 或 screen-spanning 做断点
浏览器早已弃用 device-width，现代 Chrome、Safari、Firefox 都不响应它；screen-spanning 更是从未被任何稳定版浏览器实现，Chromium 已标记为废弃，写上就等于白写。真实设备中，折叠屏展开后视口宽度轻松超 1200px（比如 Galaxy Z Fold4 横屏达 1808px），比很多笔记本还宽——你按“平板”设 max-width: 1024px，它根本进不去规则里。
应该用什么值？从布局断裂点反推，不是抄数字
打开 DevTools 的响应式调试模式，拖动窗口宽度，观察你的实际 UI 在哪几个宽度发生明显错位或撑不开：
-
nav-collapse：导航栏从横排塌缩成汉堡按钮的临界点 -
content-wrap：主卡片/文字区块开始换行、间距挤压变形的位置 -
sidebar-show：侧边栏从隐藏变为可见的最小宽度
记下这几个真实数值，转成 @media (min-width: XXXpx)。别硬套 768px —— 如果你的栅格在 832px 才真正需要加一列，那就用 832px。
怎么写才不互相覆盖、不漏设备
只用 min-width，从窄到宽逐级增强，避免混用 max-width 导致边界留白或重叠：
立即学习“前端免费学习笔记（深入）”；
- 所有基础样式（
320px–767px）不加媒体查询，直接写 -
@media (min-width: 768px)→ 大屏手机横屏、小折叠屏半开、iPad mini 竖屏 -
@media (min-width: 1024px)→ 主流平板横屏、折叠屏全开、桌面小窗 -
@media (min-width: 1280px)→ 宽屏桌面（可选，非必需）
注意：768px 和 1024px 是常见断裂点，但不是魔法数字；如果你的项目在 912px 就必须拉出侧边栏，那 min-width: 912px 就是你的真断点。
clamp() 能帮你省掉多少断点
对字体、行高、padding、margin 这类连续变化的属性，优先用 clamp() 替代媒体查询：
h2 {
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
}
含义：最小 1.25rem，最大 1.75rem，中间按视口宽度的 3.5vw 平滑过渡。这样在 768px→1024px 区间内字号自然伸缩，不用在每个断点里重复写 font-size。但慎用于栅格列数、固定比例容器等需精确对齐的场景——那里仍得靠媒体查询控制。
最常被忽略的一点：断点本身不是目的，而是为了支撑 Flex/Grid 布局的弹性行为。光靠改 display 或 flex-direction 很容易翻车；真正稳的，是底层用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 这类自适应语法，再用断点微调间隙和最大列数。
