断点应基于真实设备视口宽度和内容承载能力设定，优先使用min-width（如640px、768px、992px、1280px），遵循移动优先、单向增强原则，省略screen and，且必须配合viewport meta标签。
直接说结论：断点不是靠猜的，而是根据真实设备视口宽度和内容承载能力定的；min-width 比 max-width 更可靠，移动端优先写法能大幅降低维护成本。
为什么用 min-width 而不是 max-width 做主断点？
因为浏览器渲染时，max-width 容易在高 DPR 设备（如 iPhone 15 Pro）上因视口缩放、缩放因子或 UA 覆盖导致误判；min-width 是“向上增强”的逻辑，只要当前视口够宽就启用新规则，不会回退冲突。
常见错误现象：@media (max-width: 768px) 在 iPad mini（实际视口宽度常为 768px，但 DPR=2）上可能不触发，或与 @media (min-width: 769px) 之间留出 1px 空隙，造成样式未定义。
- 推荐统一用
min-width，从最小屏开始逐级增强 - 断点值避开 768、1024 这类“设备物理分辨率”，改用内容可读性阈值（如 640px、768px、960px、1280px）
- 不要写
@media (min-width: 769px) and (max-width: 1024px)—— 多余且易漏覆盖
@media 中要不要写 screen and？
绝大多数情况可以省略。screen 是默认媒体类型，and 在单条件时也非必需。写 @media (min-width: 768px) 和 @media screen and (min-width: 768px) 效果完全一致，但前者更简洁、可读性更强。
只有两种场景需要显式写出：
一是要排除打印样式（加 not print），二是要兼容极老浏览器（IE9 及以下需 only screen 防止被忽略）。
- 现代项目（支持 Chrome 80+/Safari 14+/Firefox 78+）直接用
@media (min-width: 768px) - 如果用了
link[rel="stylesheet"]动态加载 CSS，media属性里必须写全，比如media="screen and (min-width: 992px)" -
only关键字现在基本不用了，它本意是屏蔽不支持 MQ 的旧浏览器，但这类浏览器早已退出主流
如何避免断点之间出现样式“真空”或重叠？
核心是坚持移动优先 + 单向增强原则：基础样式写在普通 CSS 规则里，所有 @media 都只做“加法”或“覆盖”，不撤销已有行为。
例如，不要这样写：
.card { width: 100%; }
@media (min-width: 768px) {
.card { width: 50%; }
}
@media (min-width: 1024px) {
.card { width: 33.33%; }
}
@media (max-width: 767px) {
.card { margin: 0; } /* 冗余且易冲突 */
}
而应该：
.card {
width: 100%;
margin: 1rem;
}
@media (min-width: 768px) {
.card { width: 50%; }
}
@media (min-width: 1024px) {
.card { width: 33.33%; }
}
- 所有断点外的样式是“默认层”，保证小屏可用
- 每个
@media块只声明该断点下需要变更的属性，不重复声明未变项 - 避免在多个媒体查询中反复设置同一属性（如
display、font-size），否则调试时难以追踪来源
真实项目中哪些断点最常用、最稳妥？
别照搬 Bootstrap 或 Foundation 的断点表。真实适配要看内容容器是否撑满、文字是否换行突兀、交互元素是否过小——而不是设备型号。
经大量线上页面验证，这四组 min-width 断点覆盖 95% 场景：
-
640px：窄屏手机横屏、小折叠屏展开态，适合调整导航栏为 inline 或增加 padding -
768px：主流平板竖屏起始点，可开启双栏布局 -
992px：小桌面/大平板横屏，适合固定容器宽度、启用侧边栏 -
1280px：宽屏显示临界点，可增加最大宽度限制、提升字体或行高
注意：480px、320px 这类超小断点已基本无必要——现代手机最小视口宽度普遍 ≥ 360px（CSS px），强行适配反而增加冗余代码。
真正容易被忽略的是：断点生效依赖 <meta name="viewport" content="width=device-width, initial-scale=1">。没有这行，iOS Safari 会强制以 980px 渲染，所有 @media 都会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
