)
媒体查询范围语法结合CSS嵌套创建了一种强大而直观的方式，使用简单的数学比较来编写响应式样式。
📖 本章概述
媒体查询范围语法是CSS的一个重要进步，它提供了一种更直观、更易读的方式来编写媒体查询。通过使用类似数学比较的语法，我们可以更清晰地表达屏幕尺寸范围，减少代码重复，提高可维护性。结合CSS嵌套，这种语法创造了更加逻辑清晰的CSS结构。
🎯 学习目标
理解媒体查询范围语法的基本概念和优势
掌握不同类型的范围语法表达方式
学会与CSS嵌套结合使用的最佳实践
了解在响应式设计中的实际应用
掌握从传统语法迁移到范围语法的方法
学会创建更加清晰和可维护的响应式代码
🚀 媒体查询范围语法基础
传统语法 vs 范围语法
/* 传统语法 - 冗长且不够直观 */ @media (min-width:400px) and (max-width:800px) { .box { padding: 2rem; } } /* 范围语法 - 简洁且直观 */ @media (400px <= width <= 800px) { .box { padding: 2rem; } } /* 传统语法 - 最小宽度 */ @media (min-width:1024px) { .container { max-width: 1200px; } } /* 范围语法 - 最小宽度 */ @media (width >= 1024px) { .container { max-width: 1200px; } } /* 传统语法 - 最大宽度 */ @media (max-width:768px) { .sidebar { display: none; } } /* 范围语法 - 最大宽度 */ @media (width <= 768px) { .sidebar { display: none; } }基本语法类型
/* 1. 范围查询 - 在两个值之间 */ @media (600px <= width <= 1024px) { /* 平板设备样式 */ }
)
