一、什么是媒体查询
媒体查询（Media Queries）是CSS3新特性之一，支持针对不同的媒体类型定义不同的样式，比如屏幕尺寸、设备方向、屏幕分辨率等等。
简单来说，就是用CSS的@media规则来判断设备的特性，解析出相应的样式规则。
1. @media语法
/* 基本语法 */
@media mediatype and (条件1) and (条件2) { … }
/* @media 示例 */
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
上面这段代码可以解读为：当设备类型为屏幕且最大屏幕宽度为768像素时，body元素背景色为浅蓝色。
现在，我们来详细了解一些@media的使用方法和示例：
二、常见媒体查询条件
1. 设备类型
@media的第一个值就是mediatype，它的取值有：
all：适用于所有设备
print：适用于打印机和打印预览模式
screen：适用于彩色屏幕设备（如电脑、平板、手机等）
speech：适用于屏幕阅读器
通常我们只使用屏幕设备，即：@media screen { ... }
2. 媒体特性（Media Features）
媒体特性指设备的各种特性，包括宽度、高度、方向、分辨率等等：
width：设备宽度
height： 设备高度
aspect-ratio：设备宽高比
orientation：设备方向，横向或纵向
resolution：设备分辨率
color：设备颜色位数，例如：monochrome、16、256等
color-index：设备颜色数量
grid：设备网格模式，只有一个布尔值auto和none
3. 使用示例
下面是一些示例，具体展示了如何使用@ media规则应用于不同设备：
三、代码示例
1. 简单示例
这个例子中，我们使用@media规则来更改页面中段落的字体大小，当屏幕宽度小于等于800像素时，字体大小为12像素；否则，字体大小为18像素。
/* 当屏幕宽度 <= 800px，在没有过滤条件的情况下应用以下样式 */
@media (max-width: 800px) {
p {
font-size: 12px;
}
}
/* 当屏幕宽度 > 800px，在没有过滤条件的情况下应用以下样式 */
@media (min-width: 801px) {
p {
font-size: 18px;
}
}
2. 多重条件示例
这个例子中，我们根据屏幕宽度、设备方向来更改页面中标题的颜色，当屏幕宽度小于等于800像素并且设备方向为横向时，标题颜色为红色；否则，标题颜色为绿色。
/* 当屏幕宽度 <= 800px 且方向为横向，在没有过滤条件的情况下应用以下样式 */
@media (max-width: 800px) and (orientation: landscape) {
h1 {
color: red;
}
}
/* 在此范围之外的所有情况下应用以下样式 */
@media (min-width: 801px) {
h1 {
color: green;
}
}
四、总结
使用@media规则可以让我们更好地针对不同设备和媒体应用不同的样式，提高了页面的可读性和用户体验。在实际开发中，媒体查询是一个非常常用的且必备的技术。