当CSS也玩起了逻辑：@media查询的进阶探险记 最近沉迷于捣鼓响应式设计，总觉得自己对@media的理解还停留在只会用max-width和min-width的石器时代。直到我深入研究了@media查询的逻辑组合和范围查询，才发现这玩意儿简直就是CSS里的逻辑学家，能玩出各种花样，简直是解放生产力，提升幸福感的良药。 想象一下，以前做响应式设计，恨不得把所有屏幕尺寸都考虑进去，各种@media规则像叠积木一样，一层又一层。改一个地方，就要通篇检查，生怕影响了其他尺寸的显示。现在好了，掌握了@media的逻辑组合，就能像写代码一样，把各种条件组合起来，简洁高效，简直是优雅到极致。 and、or、not：CSS界的逻辑三巨头 最开始接触@media，我把它当成一个简单的条件判断语句。但是，当它和and、or、not这些逻辑运算符结合起来，就变成了强大的逻辑表达式。 and：鱼与熊掌兼得 and就像一个严谨的HR，要求所有条件都满足才能通过。比如： @media (min-width: 768px) and (max-width: 991px) { /* 在768px到991px之间的屏幕 …