什么是CSS媒体查询？
CSS媒体查询（Media Query）是现代网页设计中不可或缺的技术，它允许开发者根据设备特性（如屏幕尺寸、分辨率、方向等）应用不同的CSS样式。
媒体类型基础
在CSS2中，我们已经可以使用媒体类型来区分不同的设备：
在 W3C 中共列出了 10 种媒体类型，如下表所示：
媒体查询基础语法
媒体查询的基本语法结构如下：
常用媒体特性
实用示例
1. 响应式断点设计
2. 处理打印样式
3. 针对高分辨率设备
高级技巧
1. 使用not关键字排除特定条件
2. 使用only关键字隐藏旧浏览器
3. 组合多个条件
媒体查询的引入方式
1. HTML中通过link标签引入：
2. CSS中使用@import引入：
3. 直接在CSS中使用@media规则：
性能优化建议
- 移动优先设计：先编写移动端样式，再用媒体查询逐步增强大屏幕体验
- 避免不必要的媒体查询：合理设置断点，不要过度细分
- 合并媒体查询：相同条件的媒体查询尽量合并
- 使用相对单位：优先使用em/rem而非px，提高可访问性
总结
CSS媒体查询是响应式网页设计的核心技术，它让我们的网站能够智能地适应各种设备和屏幕尺寸。通过合理设置断点和优化媒体查询，我们可以创建出既美观又高性能的响应式网站。