推荐用min-width因移动优先逻辑更可控：默认手机样式，min-width断点仅叠加新规则不覆盖旧样式，避免max-width导致的768px等临界宽度无规则接管或覆盖混乱。
直接用 @media (min-width: 768px) 和 @media (min-width: 1024px) 就能覆盖绝大多数手机和平板场景，但必须按移动优先顺序写，且断点值得根据你内容的实际坍塌点微调，不能硬套。
为什么推荐 min-width 而不是 max-width 写手机/平板断点
因为浏览器层叠逻辑更可控：默认样式写手机，@media (min-width: 768px) 表示“只要够宽就加新规则”，不会推翻前面已生效的样式。而 max-width 容易漏掉中间宽度（比如 769–1023px），尤其当你只写了 @media (max-width: 767px) 和 @media (max-width: 1023px) 时，768px 这个像素点反而没被任何规则接管。
常见错误现象：768px 宽度下导航栏既没折叠也没展开，文字换行错乱，卡片列数不切换。
- 移动端默认样式（无媒体查询）应是竖屏单列、字体适中、触摸目标足够大
-
@media (min-width: 768px)专用于平板竖屏及以上：可启用两栏、增大 padding、显示完整导航 -
@media (min-width: 1024px)面向平板横屏或小桌面：适合开启三栏、固定侧边栏、提升容器最大宽度 - 不要用
@media (min-width: 769px)——768px是 iPad 竖屏最小逻辑宽度，跳过它等于放弃一批真实设备
断点值别抄数字，要测你自己的内容坍塌点
打开 Chrome DevTools → 切换 Device Toolbar → 拖动窗口宽度，盯住三个地方：导航栏是否开始挤压变形、主卡片是否从一列变成两列、正文段落是否出现难看的断词或超宽空白。记下这些临界宽度，再设断点。
立即学习“前端免费学习笔记（深入）”；
例如你发现卡片在 752px 开始错位，那就用 @media (min-width: 753px)，而不是强行凑整到 768px。
- 典型参考值（仅作起点）：
768px（iPad 竖屏最小）、1024px（iPad 横屏起点）、1200px（桌面常规内容区上限） - 安卓平板横屏常达
812px–1280px，若你的导航在800px就塌了，768px断点就失效 - iPhone SE 第三代逻辑像素是
375px，但 DPR=2，实际触发max-width常在414px–480px区间；min-width不受此干扰
怎么避免多个断点互相覆盖或留白
所有 @media 规则必须按 min-width 从小到大排列，且后一个断点起始值必须紧接前一个的结束点。比如用了 @media (min-width: 768px)，下一个就得是 @media (min-width: 1024px)，不能写成 @media (min-width: 1025px)，否则 1024px 这个宽度没样式接管。
错误写法示例：@media (min-width: 768px) { ... } 和 @media (min-width: 1025px) { ... } —— 1024px 宽度下只有第一段生效，但你本意可能是让它进第二段。
- 断点之间不要留空隙，也不要重叠（如
min-width: 768px和min-width: 768px同时存在） - 所有响应式 CSS 最好集中写在主样式表末尾，避免被组件内嵌的零散
@media打乱顺序 - 不用
em写断点——用户缩放或系统字体设置会改变1em实际像素值，导致断点漂移
真正难的不是选哪几个像素值，而是每次改布局后重新验证坍塌点。哪怕只动了一个 padding 或一行 grid-template-columns，都可能让原来好用的断点失效。
