CSS Media Query 范围语法

CSS Media Query Level 4范围语法：@media (width >= 768px)比min-width更直观、and/or/not逻辑组合、(400px <= width <= 800px)区间语法、与旧写法向后兼容 · 难度：入门 · +10XP

CSS Media Query 范围语法 —— 更直观的断点写法

以前写响应式断点要用min-width和max-width，得在脑子里反转逻辑。CSS Media Query Level 4引入了范围语法，写法更自然。

旧写法 vs 新写法

/* 旧写法（要动脑子想） */
@media (min-width: 768px) and (max-width: 1023px) { }
/* 新写法（直接读出来） */
@media (768px <= width <= 1023px) { }

更多例子

/* 大于等于768px */
@media (width >= 768px) { }

/* 小于480px */
@media (width < 480px) { }
/* 在500px到800px之间 */
@media (500px <= width <= 800px) { }

动手练习

1. 基础练习：把你之前写的响应式断点全部改成范围语法。
2. 进阶应用：用范围语法做三个断点——手机(<640px)、平板(640px-1024px)、桌面(>1024px)。
3. 项目实战：检查项目中所有的@media规则，统一改用范围语法。