17.媒体查询范围语法 (Media Query Range Syntax)

媒体查询范围语法结合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) { /* 平板设备样式 */ }