媒体查询入门指南

CSS 媒体查询是一种强大的技术，它允许你根据设备的环境特征来应用不同的 CSS 样式。只有当浏览器和设备的环境与您指定的规则相匹配时，CSS 规则才会被应用，例如"视口宽度大于 480 像素"。媒体查询是响应式网页设计的核心组成部分，因为它使您能够根据视口尺寸创建不同的布局，同时也可以用于检测与您的网站运行环境相关的其他条件，例如用户是使用触摸屏还是鼠标。在本指南中，您将首先学习媒体查询的语法，然后在实践示例中应用这些知识，了解如何将简单设计转变为响应式设计。

学习前提

• HTML 基础知识
• 对 CSS 工作方式的基本了解

目标

理解如何使用媒体查询以及如何用它建立响应式设计的常见方法。

媒体查询的基本语法

媒体查询的基本语法包括媒体类型和媒体表达式。媒体类型描述了设备的一般类别，而媒体表达式则指定了媒体特性必须满足的条件才能应用样式。

常见媒体特性

• width 和 height：视口的宽度和高度
• orientation：设备的方向（横向或纵向）
• resolution：设备的分辨率
• hover：设备是否支持悬停功能
• pointer：设备的主要输入类型（鼠标、触摸笔等）

实践示例

让我们通过一个简单的示例来了解如何使用媒体查询。假设我们有一个网页，在桌面设备上显示为三列布局，而在移动设备上显示为单列布局。

响应式设计的最佳实践

• 优先考虑移动设备设计（移动优先方法）
• 使用相对单位（如百分比、em、rem）而非固定像素
• 测试多种设备和屏幕尺寸
• 考虑使用 CSS 框架（如 Bootstrap）简化响应式设计

总结

媒体查询是实现响应式网页设计的强大工具。通过理解其基本语法和常见媒体特性，您可以创建适应不同设备和屏幕尺寸的灵活布局。随着移动设备的普及，掌握媒体查询已成为前端开发人员的必备技能。