媒体查询（Media Query）是什么

媒体查询（Media Query）是CSS3中引入的一个功能，它允许开发者根据不同的设备特征（如屏幕尺寸、设备方向、分辨率等）来应用不同的样式规则。媒体查询使得响应式网页设计成为可能，因为它们可以根据用户的设备和上下文环境改变网页的布局和样式。

媒体查询通过@media规则来实现，可以指定一个或多个媒体类型，并可以包含可选的条件表达式。以下是一个基本的媒体查询示例：

 @media screen and (max-width: 600px) {
  /* 当屏幕宽度小于或等于600像素时应用的样式 */
  body {
    font-size: 14px;
  }
}

在这个例子中，如果设备的屏幕宽度小于或等于600像素，那么body元素的字体大小将被设置为14像素。

媒体查询还可以包含其他条件，如min-width（最小宽度）、orientation（设备方向）等。它们可以嵌套在其他CSS规则中，也可以单独作为一个文件，通过@import规则引入：

@import url("styles.css") screen and (min-width: 800px);

在上面的代码中，当屏幕宽度大于或等于800像素时，才会导入styles.css文件。

媒体查询是现代网页设计中的一个核心概念，它们使得网页能够适应不同的设备和屏幕尺寸，从而提供一致的用户体验。