不用 min-width 和 max-width 组合。CSS3 支持原生范围语法如 @media (width >= 768px) and (width
媒体查询范围语法到底要不要用
min-width和max-width组合？不用。CSS3 原生支持范围写法，比如
@media (width >= 768px) and (width ，但这个语法目前（截至 2024 年）仅 Chromium 111+ 支持，Firefox 和 Safari 完全不识别，直接忽略整条规则。所以现在写范围，还是得靠传统写法——但可以更干净。怎么写出真正简洁又兼容的断点范围？
核心是利用“移动优先” +
min-width单向声明，避免max-width冗余叠加。比如要定义「平板横屏区间」（768px–1023px），别这么写：@media (min-width: 768px) and (max-width: 1023px) { ... }而应该拆成两层递进：
- 默认样式（手机）
@media (min-width: 768px)→ 启用平板竖屏及以上基础样式@media (min-width: 1024px)→ 覆盖并升级为桌面样式这样，768px–1023px 的样式就自然落在两个断点之间的“空隙”里，无需显式写
max-width。既减少代码量，又规避了多条件嵌套带来的维护混乱。
and连接多个条件时容易漏掉哪些兼容细节？当必须用
and（比如要同时限定宽度和hover能力），要注意三点：
- 所有条件必须用括号包裹，
@media (min-width: 768px) and (hover: hover)✅；@media min-width: 768px and hover: hover❌（无效）hover: hover在 iOS Safari 上始终返回none，哪怕设备支持触控+鼠标，别依赖它做关键布局分支- 像
(width >= 768px)这类新语法一旦混入老写法中（如@media (min-width: 768px) and (width >= 768px)），整个媒体查询会因语法错误被浏览器整体丢弃为什么别急着用
width、height等数值比较语法？因为它们不是“渐进增强”，而是“全有或全无”。Chrome 支持了，Safari 用户看到的就是未生效的默认样式——而且没有任何降级提示或报错。更麻烦的是，这类语法不能和
rem、em或视口单位混用，(width >= 48rem)是非法的，必须写死像素值。真要动态响应，不如用clamp()配合单一断点，或者交由 JS 检测后加 class 控制。实际项目里，最稳的“简洁”就是少写一行
max-width，而不是多写一个未来语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
