一、什么是CSS媒体查询

CSS媒体查询是CSS3引入的一项新特性，通过查询不同的媒体设备来应用不同的CSS样式，可实现针对不同设备的灵活布局。

在实际开发中，我们可以使用媒体查询来针对不同屏幕尺寸应用对应的CSS样式，从而使网页在不同的设备上具有更好的适应性。媒体查询可以根据视口（viewport）的宽度、高度、方向、分辨率等参数，来应用不同的CSS样式。

下面是一段简单的CSS媒体查询实例：

@media screen and (min-width: 768px) {
  /* 当视口的宽度大于等于768px时应用的CSS样式 */
  body {
    background-color: #dedede;
  }
}

上述代码会在视口宽度大于等于768像素时修改背景颜色。

二、在哪里使用CSS媒体查询

在实际开发中，CSS媒体查询可以应用于不同的地方，如：

1. 响应式布局

响应式布局是一种在PC、平板和手机等设备上均好用的布局方式，通过CSS媒体查询可以在不同设备上显示不同的布局效果。以下是一个响应式布局的示例：

/* PC上的样式 */
.box {
  width: 50%;
}

/* 平板上的样式 */
@media screen and (max-width: 768px) and (min-width: 480px) {
  .box {
    width: 70%;
  }
}

/* 手机上的样式 */
@media screen and (max-width: 479px) {
  .box {
    width: 100%;
  }
}

在上述例子中，如果屏幕宽度大于768像素，则使用50%的宽度；如果在480像素到768像素之间，则使用70%的宽度；如果屏幕宽度小于等于479像素，则使用100%的宽度。

2. 图片和视频的自适应

媒体查询也可用于图片和视频的自适应。以下是一个图片自适应的示例：

img {
  max-width: 100%;
  height: auto;
}

上述示例中，图片的最大宽度为100%，高度自适应，从而实现了图片的自适应。

3. 隐藏/显示元素

媒体查询还可以根据不同设备的屏幕尺寸来隐藏或显示元素。以下是一个隐藏元素的示例：

/* PC上不隐藏元素 */
.element {
  display: block;
}

/* 在屏幕尺寸小于768像素时隐藏元素 */
@media screen and (max-width: 767px) {
  .element {
    display: none;
  }
}

在上述示例中，在屏幕尺寸小于768像素时，元素会被隐藏。

三、如何使用CSS媒体查询

在使用CSS媒体查询时，需要了解如下几个关键点：

1. 媒体类型

CSS媒体查询有多个媒体类型可供选择，如all、screen、print、speech等。其中'all'是默认媒体类型，相当于无论何时都会应用的样式；'screen'表示样式仅在计算机屏幕上使用；'print'表示仅在打印时使用；'speech'用于语音和音频合成器。

例如，下面代码将只在屏幕上应用样式：

@media screen {
  /* 样式 */
}

2. 媒体特征

媒体查询除了媒体类型，还包括媒体特征。媒体特征是一些描述设备环境特征的关键字。媒体特征包括：

• 宽度(width)
• 高度(height)
• 方向(orientation)
• 分辨率(resolution)
• 颜色(color)

例如，下面代码将只在视口宽度小于500像素时应用样式：

@media only screen and (max-width: 500px) {
  /* 样式 */
}

3. 表达式

媒体查询可以使用逻辑运算符(and或or)来组合多个媒体特征。例如，“仅当视口宽度在500像素和700像素之间时，应用样式”可以写成：

@media only screen and (min-width: 500px) and (max-width: 700px) {
  /* 样式 */
}

4. min和max关键字

在媒体查询中，min和max是两个重要的关键字。min表示大于等于，max表示小于等于。

例如，下面代码将只在视口宽度大于等于500像素时应用样式：

@media only screen and (min-width: 500px) {
  /* 样式 */
}

四、总结

CSS媒体查询是一项非常实用的CSS3新特性，可以帮助前端开发人员更灵活、更方便地布局和设计网页，适应不同的设备。掌握媒体查询的使用方法，可以让我们在不同的屏幕尺寸下提供更加优秀的用户体验。