媒体查询是什么

媒体查询（Media Query）是 CSS3 引入的一项核心技术，它是实现响应式网页设计（Responsive Web Design）的基础。

简单来说，媒体查询就像是给 CSS 样式加了一个“智能开关”或“条件判断”。它允许你根据用户设备的不同特征（比如屏幕宽度、设备类型、屏幕方向等），来有条件地应用不同的 CSS 样式。

媒体查询的基本作用

媒体查询最核心的作用就是让同一套网页代码能够完美适配各种不同的终端设备。具体体现在：

1. 实现响应式布局：这是媒体查询最广泛的应用。通过检测设备屏幕的宽度，你可以为手机、平板、电脑等不同尺寸的设备提供专属的排版和样式。例如，在电脑上显示多列布局，而在手机上自动变为单列堆叠，确保内容在任何屏幕上都清晰易读。
2. 针对特定设备类型优化：除了屏幕，媒体查询还可以识别打印机、屏幕阅读器等设备。最常见的例子就是打印样式，你可以专门为打印页面设置隐藏导航栏、调整字体颜色为黑色等样式，从而节省墨水并提升纸质阅读体验。
3. 适配设备状态与能力：媒体查询还能检测设备的实时状态或硬件能力。例如，判断手机是处于竖屏还是横屏状态，或者检测用户是否在使用触摸屏（无法悬停）还是鼠标（可以悬停），从而提供更具针对性的交互体验。

---

基础语法与使用方式

媒体查询的基本语法非常直观，通常由 @media 规则、一个可选的媒体类型和一个或多个媒体特性表达式组成。

基础结构：

@media 媒体类型 and (媒体特性: 值) {
  /* 当条件满足时，这里的 CSS 样式才会生效 */
}

• 媒体类型 (Media Type)：指设备的粗略分类，常见的有 screen（带屏幕的电子设备，如电脑、手机）和 print（打印机）。如果不写，默认为 all（适配所有设备）。
• 媒体特性 (Media Feature)：指设备的具体特征，最常用的是 width（视口宽度）、height（视口高度）、orientation（方向）等。

举个最经典的例子（适配小屏手机）：

/* 当屏幕宽度小于或等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px; /* 手机上字体调小一点 */
    padding: 10px;
  }
  .sidebar {
    display: none; /* 手机上隐藏侧边栏 */
  }
}

除了在 CSS 文件中使用 @media，你还可以在 HTML 中通过 <link> 标签的 media 属性来引入专门的条件样式表：

<!-- 专门为打印设备引入 print.css 样式表 -->
<link rel="stylesheet" href="print.css" media="print" />

常见的媒体查询特性

除了最常用的屏幕宽度，你还可以利用以下特性实现更精细的控制：

媒体特性	作用说明	常见取值/示例
width / height	视口（浏览器可见区域）的宽/高	(max-width: 600px)
orientation	设备的屏幕方向	portrait (竖屏), landscape (横屏)
hover	用户的主要输入设备是否支持悬停	hover: hover (支持鼠标悬停)
resolution	设备的屏幕分辨率（像素密度）	(min-resolution: 192dpi) (适配高清/视网膜屏)
aspect-ratio	视口的宽高比	(aspect-ratio: 16/9)

总而言之，媒体查询就是前端开发中实现“一套代码，多端适配”的魔法钥匙，它让网页不再局限于单一的电脑屏幕，而是能够灵活地适应各种各样的上网设备。