媒体查询区间语法不支持简写多断点，必须用and拼接或拆分规则；320px–767px仅表窄视口，非真正“移动端”，因不识别设备类型且边界值易错位。
媒体查询区间语法不能简写多断点逻辑——它只支持单个范围，多个断点必须用 and 拼接或拆成独立规则，强行“简写”反而导致断点错位或覆盖失效。
为什么 @media (min-width: 320px) and (max-width: 767px) 不等于“移动端”
所谓“移动端”在实际项目中往往指「小屏设备 + 非桌面触控」，但 CSS 媒体查询只认视口宽度，不识别设备类型。320px–767px 这个范围确实覆盖了多数手机竖屏，但：
• iPhone SE（375px）和 iPad Mini（768px）紧挨边界，max-width: 767px 会让后者掉出规则；
• Android 小折叠屏（如 Galaxy Z Flip，展开后 720px 宽）会命中该区间，但交互习惯更接近平板；
• 桌面浏览器缩放到 400px 宽也会触发，可能造成误样式。
所以真实项目中，这个区间只是“窄视口”，不是“移动端”。要不要加 pointer: coarse 或 hover: none 判断，得看交互需求。
min-width 和 max-width 组合时的常见错误
用区间写法时，边界值处理最容易翻车：
- 漏掉单位（如
min-width: 320→ 无效，必须是min-width: 320px） - 相邻断点没留缝隙：比如
@media (max-width: 767px)和@media (min-width: 768px)看似无缝，但 767.5px 视口（缩放或高 DPR 下常见）可能两个都不匹配 - 用
max-width主导时，忘记重置样式：大屏规则里设的font-size: 16px，小屏规则只改padding，结果字体还是 16px - 嵌套写法误导人：
@media (320px 是无效语法，CSS 不支持这种数学式写法
真正能减少重复代码的实用技巧
与其追求“一行写完所有移动端”，不如用组合策略降低维护成本：
- 用移动优先，默认写小屏样式，再用
@media (min-width: 768px)往上加；这样避免大量max-width重复声明 - 把公共响应式属性抽成自定义属性，例如：
:root { --text-base: 14px; }<br>@media (min-width: 768px) { :root { --text-base: 16px; } }<br>p { font-size: var(--text-base); } - 对强依赖设备能力的场景，用 JS 辅助判断：
matchMedia('(pointer: coarse) and (hover: none)')比纯 CSS 更准 - 工具链里用 PostCSS 插件（如
postcss-media-minmax）可把@media (width >= 320px)编译成标准语法，但注意它只是语法糖，不解决逻辑问题
断点数量一多，区间嵌套就难调试——最易被忽略的是视口缩放、DPR 变化带来的边界漂移，以及 CSS 层叠顺序和 specificity 对最终样式的隐性干扰。别迷信“简写”，先理清每个断点的真实意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
