应根据响应式策略选择：移动端优先用min-width（从小到大排列），桌面端优先用max-width（从大到小排列且需加screen and）；断点须基于内容实际临界点而非固定模板。
用 min-width 还是 max-width，取决于你从哪端开始写样式
移动端优先就用 min-width，桌面端优先就用 max-width。这不是“哪个更好”，而是策略选择——它直接决定你基础样式写在哪、覆盖逻辑怎么走。
比如你默认给所有设备写了 100% 宽度的卡片，只在大屏上改成两栏布局，那就该用 @media (min-width: 768px) 去加宽；反过来，如果你默认写了桌面三栏，只在小屏收成一栏，就得用 @media (max-width: 767px) 去降级。
混着用风险很高：同一份 CSS 里同时出现 min-width: 768px 和 max-width: 767px，看似无缝，但一旦视口宽度恰好卡在 767.5px（比如 DPR=2 的某些 iOS 设备），或你后期加了 min-width: 769px，中间就漏掉一个像素区间，样式会意外回退到基础层。
min-width 必须从小到大排列，否则后写的会覆盖前写的
CSS 是从上到下解析的，同优先级规则后声明者生效。如果你把 @media (min-width: 1024px) 写在 @media (min-width: 768px) 前面，那么在 1024px 宽度下，两个查询都匹配，但后者（768px）的规则会覆盖前者中没重写的属性——比如你只在 1024px 版本里改了 font-size，但忘了改 padding，那 padding 就会沿用 768px 版本的值，而不是你预期的“1024px 专属样式”。
- ✅ 正确顺序：
@media (min-width: 320px)→@media (min-width: 768px)→@media (min-width: 1024px) - ❌ 错误写法：跳过某个常见尺寸（如从 320px 直接到 1024px），或倒着写
- ⚠️ 注意：
min-width: 768px匹配的是 ≥768px，不是“等于 768px”，所以不要写成width: 768px——那个根本不会生效
max-width 必须从大到小排列，且建议显式写 screen and
用 max-width 意味着你采用桌面优先策略，默认样式面向大屏，靠降级覆盖小屏。这时如果断点不递减，比如先写 @media (max-width: 480px)，再写 @media (max-width: 767px)，那么在 481–767px 区间两者都命中，后者生效——但你本意可能是让这个区间有独立样式，结果却成了“兜底覆盖”，调试时很难定位。
另外，仅写 @media (max-width: 767px) 在旧版 Safari 和 Electron 中可能被忽略，必须写成 @media screen and (max-width: 767px) 才稳妥。
- ✅ 正确顺序：
@media screen and (max-width: 1199px)→@media screen and (max-width: 991px)→@media screen and (max-width: 767px) - ❌ 不要省略
screen and，尤其当项目需兼容 Safari 13 以下或旧版 Electron - ⚠️
max-width: 767px匹配的是 ≤767px，不是“小于 768px”——虽然数值上等价，但语义和可读性差，容易和min-width: 768px写反
断点值别抄模板，得看内容真正撑不开的临界点
“768px 是 iPad 竖屏”只是参考，实际项目里，触发换行或挤压的宽度往往由字体大小、内边距、容器 padding 和 flex-wrap 行为共同决定。比如一个带图标和文字的按钮，在 Chrome DevTools 里拖动 viewport 宽度，观察它何时突然换行——那个像素值才是你该设的 min-width 断点。
更麻烦的是高 DPR 设备：iPhone SE 第三代逻辑像素 375px，但 CSS 视口宽度按设备独立像素算，真实触发点常落在 414px–480px 之间。所以别死守整数，用 min-width: 420px 比硬套 375px 更可靠。
最常被忽略的一点：断点不是越多越好。三个关键区间（手机、平板、桌面）足够覆盖 95% 场景，加太多反而增加维护成本和 CSS 文件体积。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
