媒体查询是实现响应式设计的核心技术，允许根据设备特性动态调整CSS样式。以下是关键知识点：
1. 基础语法结构 📜
@media 媒体类型 and (媒体特性) {
/* 样式规则 */
}
- 媒体类型：
screen（屏幕）、print（打印）、speech（语音） - 媒体特性：
width、min-width、orientation（横屏/竖屏）、resolution（分辨率）
2. 常见媒体特性示例 📏
- 屏幕宽度：
max-width: 600px（手机端适配） - 设备方向：
orientation: portrait（竖屏模式） - 分辨率：
min-resolution: 2dppx（高密度屏幕）
3. 实用场景 🌐
- 移动优先策略：
@media (max-width: 600px) - 横屏显示优化：
@media (orientation: landscape) - 打印样式控制：
@media print
4. 最佳实践 ✅
- 使用 断点（Breakpoints）时保持一致性
- 避免嵌套过多媒体查询
- 测试不同设备尺寸的兼容性
5. 扩展阅读 🔗
想深入了解响应式设计原理？请访问 /design-resources/guides/responsive-design 获取完整指南。