1. 前言
在讲解媒体查询之前，我们需要先了解响应式布局的概念。响应式布局指的是网页设计的一种技术，通过使用 HTML、CSS、JavaScript 等技术识别不同的设备和屏幕尺寸，自适应地调整页面布局和内容的大小，以达到适应不同设备的效果。
然而，随着不同设备以及不同屏幕尺寸的增加，响应式布局也变得越来越难维护。这就是媒体查询出现的原因。
2. 什么是媒体查询？
媒体查询是 CSS3 中的一个新特性，它可以根据不同的媒体条件来定义不同的样式表，包括屏幕、打印机和屏幕阅读器等。使用媒体查询技术，不同设备上的元素可以拥有不同的显示样式。
媒体查询包括两个部分：媒体类型和媒体特性。
2.1 媒体类型
媒体类型指的是将样式应用于特定媒体的条件。可以根据需要使用不同的媒体类型，如“all”（默认值）、“screen”（用于电脑显示器）、“print”（打印机使用）等等。
<link rel="stylesheet" media="screen and (min-width: 768px)" href="style.css">上面的代码中，媒体查询使用了 “screen” 媒体类型，并且当屏幕宽度大于等于 768px 时使用 “style.css” 样式表。
2.2 媒体特性
媒体特性指的是可以根据不同的特性来定义样式，这些特性包括 “min-width”（最小宽度）、“max-width”（最大宽度）、“orientation”（方向）、“resolution”（分辨率）等等。
下面的代码中，我们使用 “min-width” 和 “max-width” 媒体特性来定义不同的样式：
<style>
/* 默认样式 */
p {
font-size: 16px;
}
/* 当屏幕宽度大于等于 768px 时 */
@media (min-width: 768px) {
p {
font-size: 24px;
}
}
/* 当屏幕宽度小于 768px 时 */
@media (max-width: 767px) {
p {
font-size: 14px;
}
}
</style>
在上面的示例中，我们用 “min-width” 定义了当屏幕宽度大于等于 768px 的情况下，“p” 元素的字体大小为 24px。而 “max-width” 则是定义了当屏幕宽度小于 768px 的情况下，“p” 元素的字体大小为 14px。
3. 媒体查询的应用场景
媒体查询可以应用在很多场景中，以下是一些常见的应用场景：
3.1 响应式网页设计
媒体查询被广泛应用在响应式网页设计中，当用户访问网站时，根据不同的屏幕尺寸自适应地展示不同的布局和样式。
3.2 打印样式控制
通过媒体查询，可以控制不同打印机上的样式，以确保打印出的文档效果正确。
3.3 屏幕阅读器支持
为了方便屏幕阅读器用户获取信息，使用媒体查询可以为这些用户提供特定的样式和内容，以提高页面的可阅读性。
4. 媒体查询的实现方式
媒体查询可以通过不同的方式来实现：
4.1 嵌入式方式
媒体查询可以嵌入到 CSS 样式表中：
<style>
@media (min-width: 768px) {
/* 屏幕宽度大于等于 768px 时的样式 */
}
@media (max-width: 767px) {
/* 屏幕宽度小于 768px 时的样式 */
}
</style>
4.2 链接式方式
媒体查询也可以在链接式样式表中使用：
<link rel="stylesheet" media="screen and (min-width: 768px)" href="style.css">在上面的代码中，当屏幕宽度大于等于 768px 时，使用名为 “style.css” 的样式表。
5. 媒体查询的优点
使用媒体查询的优点包括：
5.1 更好的用户体验
通过适配不同屏幕尺寸和设备，媒体查询可以提高用户的浏览体验，使用户在使用不同设备时都可以正常地浏览网页内容。
5.2 减少代码量
使用媒体查询可以减少代码量，避免使用多个样式表来适应不同的屏幕尺寸和设备。
5.3 更容易维护
使用媒体查询可以使代码更加简洁，降低代码维护的难度。
6. 总结
媒体查询是 CSS3 中的一个新特性，通过使用不同的媒体类型和媒体特性，可以使元素自适应地适应不同设备和屏幕尺寸，提高用户的浏览体验。使用媒体查询可以减少代码量，降低代码维护的难度。