媒体查询是 CSS3 中一个非常有用的特性，它允许我们根据不同的设备特性来应用不同的样式。下面是一些关于媒体查询的基础知识和使用方法。

媒体查询的基本语法

媒体查询的基本语法如下：

@media media-type and (expression) {
  /* CSS样式 */
}

其中，media-type 表示媒体类型，如 screen、print 等；expression 表示媒体查询的条件，如 width: 600px 等。

常用的媒体查询条件

以下是一些常用的媒体查询条件：

  • 宽度：width: 600px
  • 高度：height: 400px
  • 视口宽度：min-width: 600px
  • 视口高度：min-height: 400px
  • 设备方向：orientation: landscape

媒体查询示例

以下是一个简单的示例，展示了如何使用媒体查询来改变不同屏幕尺寸下的样式：

@media screen and (max-width: 600px) {
  body {
    background-color: red;
  }
}

@media screen and (min-width: 601px) {
  body {
    background-color: blue;
  }
}

在这个示例中，当屏幕宽度小于或等于 600px 时，背景颜色为红色；当屏幕宽度大于 600px 时，背景颜色为蓝色。

扩展阅读

想要了解更多关于媒体查询的知识，可以阅读以下教程：

CSS3 媒体查询示例