@media (min-width: 768px)有效而(width: 768px)无效，因width仅支持精确匹配，min-width/max-width才支持范围判断；断点须按序排列，min-width从小到大、max-width从大到小，且应基于内容挤压临界点设定，避免缝隙与覆盖。
为什么@media (min-width: 768px)比@media (width: 768px)有效
因为 width 是精确匹配媒体特性，只接受具体数值（如 width: 768px），不支持范围判断；而 min-width 和 max-width 才是专为响应式设计设计的范围特性。写成 @media (width >= 768px) 或 @media (width: >=768px) 会被浏览器完全忽略，且不报错——这是最常被误以为“逻辑没生效”的真实原因。
min-width断点必须从小到大排列，否则样式会意外覆盖
浏览器按 CSS 从上到下解析，同优先级规则后声明者覆盖前声明者。如果你把 @media (min-width: 1024px) 写在 @media (min-width: 768px) 前面，那么在 1024px 设备上，两个查询都会命中，但后者（768px）的规则会覆盖前者（1024px）中未重新定义的属性，造成隐性依赖和调试困难。
- ✅ 正确顺序：
@media (min-width: 768px)→@media (min-width: 1024px)→@media (min-width: 1200px) - ❌ 错误顺序：反过来写，或中间跳过某个区间（比如从 768px 直接到 1200px，漏掉 1024px 区间）
- 每个断点内只写「该区间需要变更」的样式，不要重复定义基础层已设好的字体、颜色、margin 等
max-width断点必须从大到小排列，且不能和min-width混用
用 max-width 意味着你采用桌面优先策略：默认样式面向大屏，小屏靠降级覆盖。这时若断点值不递减，比如先写 @media (max-width: 767px)，再写 @media (max-width: 991px)，那么在 768–991px 区间两者都匹配，后者生效——但你本意可能是让这个区间单独处理，结果却成了“兜底覆盖”。
- ✅ 正确顺序：
@media screen and (max-width: 1199px)→@media screen and (max-width: 991px)→@media screen and (max-width: 767px) - ⚠️ 必须显式写
screen and：仅写@media (max-width: 767px)在旧版 Safari 和 Electron 中可能失效 - ? 混用风险高：同一组逻辑里同时出现
min-width和max-width，极易遗漏 768px–991px 这类“缝隙区间”，尤其当断点值不是整数边界时（如写了min-width: 769px就漏掉了恰好 768px 的设备）
断点值不该抄模板，而应基于内容挤压临界点反推
所谓“768px 是 iPad 竖屏”，只是参考值。实际项目中，iPhone SE 第三代逻辑像素 375px，但 DPR=2，真实触发点常在 414px–480px；iPad Pro 横屏渲染宽度可达 1024px，但高 DPI 下布局表现完全不同。盲目套用通用断点，反而导致折叠屏横竖切换时错乱、文字突然换行、卡片堆叠异常。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确做法：在 Chrome DevTools 中拖动响应式调试滑块，观察文字折行、导航栏折叠、图片溢出的**第一个临界像素值**，以此设为断点
- 常见有效临界点：
max-width: 480px（老款小屏）、min-width: 576px（主流手机横屏）、min-width: 768px（平板竖屏起始）、min-width: 1024px（平板横屏/小桌面） - 断点之间必须首尾紧邻：如果用了
min-width: 768px，下一个就该是min-width: 1024px，不要写成769px或1023px，否则那个像素点会彻底无样式接管
