先记住这个答案
范围语法把断点写成比较式，例如 (width >= 600px) 或 (400px <= width < 800px)，更容易看出一个区间的上下界。迁移时最容易错的是临界值：<= 与 < 在恰好 800px 时结果不同，两条相邻规则若都包含边界还可能同时命中。应按原有断点的包含关系逐个核对，而不是机械替换成新语法。
>=与min-width边界一致<不包含端点- 范围写法不改变级联优先级
- 旧环境要核对语法支持
双列布局的上下边界
一个组件只在中等视口使用双列：旧写法是 (min-width: 600px) and (max-width: 900px)。范围语法可写成 (600px <= width <= 900px)，两个端点都包含。若设计实际要求“超过 600px”，就改成 600px < width；别因为觉得语法更短而无意改变 600px 这一点的表现。团队有旧浏览器目标时，先核对目标支持再替换。
@media (600px <= width <= 900px) {
.catalog {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 两端包含，与 min/max 同时写相应边界相同 */传统 min-width 与 max-width 对应包含边界的比较，范围语法还可以自然表达严格大于或小于。
示例范围从 600px 到 900px，两端都包含；把 900px 写成 < 900px 后恰好 900px 就不匹配。另一个常见坑是只为中间区间设置两列，却没有给更宽屏幕定义三列，超过 900px 又退回单列。范围查询只控制某段条件，完整布局还要想清楚区间之外是什么状态，并让默认规则有合理结果。
范围符号决定临界点是否命中
两种写法都查询视口宽度，并不改变 CSS 级联、媒体类型或样式优先级。浏览器不理解某条媒体查询时，会忽略其中的规则，因此支持策略应按实际目标环境制定。与容器查询的范围条件也不要混淆：后者查询的是组件容器，而非全局视口。
假设单列到 599px、双列从 600px 开始，旧规则的边界是包含 600px。改写成 (width > 600px) 会让恰好 600px 的状态落空；相邻区间若都写 <= 800px，800px 又会同时命中。浏览器最后仍会按级联选值，但这不是想要的明确分段。检查断点前后各一个像素比只看常用设备宽度更能发现这类错误。
范围语法还要留意单位与浏览器兼容。(400px <= width <= 800px) 里的两个数都必须是长度，不能一边误写成无单位的数字。团队如果要同时服务旧版嵌入浏览器，应先查看目标环境是否识别新语法，再决定保留传统 min-width、max-width 写法或提供等价回退。新语法提高了表达清晰度，但不会替项目自动解决兼容问题。
容易答错的地方
- 把
<与<=当成一样 - 精确临界点是否命中会不同，多个断点相邻时尤其要检查。
- 以为新语法改变优先级
- 条件是否匹配与 CSS 级联是两步；语法短不意味着样式更强。
面试官还会怎么问？
如何把 (min-width: 600px) 改成范围语法？
可写 (width >= 600px)，保留 600px 这一边界。
区间两端都要写 width 吗？
链式范围比较写一次 width 即可，例如 (600px <= width <= 900px)。
怎样处理旧浏览器？
按项目支持矩阵检查范围语法，必要时保留传统 min-、max- 规则作为兼容方案。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。