在网页开发过程中，不同终端的屏幕尺寸、分辨率存在明显差异，固定宽度的布局往往会导致小屏设备出现横向滚动条，大屏设备内容过于稀疏的问题。媒体查询作为CSS3提供的核心特性，能够根据设备的环境参数动态匹配对应的样式规则，实现页面布局随数据变化和设备条件自动调整的效果，是构建响应式页面的基础能力。
媒体查询基础语法
媒体查询通过@media规则定义，核心逻辑是设置触发条件，当条件满足时应用对应的CSS样式。基础语法结构如下：
/* 媒体查询基础结构 */
@media 媒体类型 and (媒体特性条件) {
/* 满足条件时应用的样式 */
.container {
width: 100%;
padding: 0 15px;
}
}
常用的媒体类型包括screen（屏幕设备）、print（打印设备），如果不指定媒体类型，默认匹配所有设备。媒体特性中最常用的是width相关属性，包括min-width（最小宽度）、max-width（最大宽度），用来判断当前视口的宽度范围。
常见断点设置规则
断点是指媒体查询触发样式切换的视口宽度阈值，合理的断点设置能够覆盖主流设备的屏幕尺寸。目前行业通用的断点参考如下：
| 设备类型 | 视口宽度范围 | 对应断点设置 |
|---|---|---|
| 手机端 | 小于768px | max-width: 767px |
| 平板端 | 768px到991px | min-width: 768px and max-width: 991px |
| 小桌面端 | 992px到1199px | min-width: 992px and max-width: 1199px |
| 大桌面端 | 大于等于1200px | min-width: 1200px |
完整自适应布局示例
下面通过一个两栏布局的例子，展示如何通过媒体查询实现不同屏幕下的布局切换：大屏下侧边栏和主内容区并排显示，小屏下侧边栏移动到主内容区下方，宽度占满全屏。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询自适应布局示例</title>
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 大屏默认样式：两栏并排 */
.main-content {
width: 70%;
float: left;
background-color: #f0f0f0;
padding: 20px;
min-height: 300px;
}
.sidebar {
width: 28%;
float: right;
background-color: #e0e0e0;
padding: 20px;
min-height: 300px;
}
/* 平板端适配：两栏宽度调整 */
@media screen and (min-width: 768px) and (max-width: 991px) {
.main-content {
width: 65%;
}
.sidebar {
width: 33%;
}
}
/* 手机端适配：两栏垂直排列 */
@media screen and (max-width: 767px) {
.main-content, .sidebar {
width: 100%;
float: none;
margin-bottom: 15px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="main-content">
<h3>主内容区</h3>
<p>这里是页面的核心内容区域，在大屏下占据70%宽度，小屏下占满全屏。</p>
</div>
<div class="sidebar">
<h3>侧边栏</h3>
<p>这里是侧边栏内容，大屏下在右侧显示，小屏下移动到主内容区下方。</p>
</div>
</div>
</body>
</html>
媒体查询使用注意事项
- 移动端优先原则：建议先写小屏的基础样式，再通过
min-width逐步添加大屏的样式，这样代码冗余更少，维护更方便。 - 避免过多断点：断点过多会导致样式规则复杂，建议优先覆盖主流设备尺寸，不需要适配所有小众分辨率。
- 结合相对单位：布局宽度尽量使用百分比、
rem、vw等相对单位，和媒体查询配合能实现更灵活的适配效果。 - 测试覆盖多端：写完媒体查询后需要在不同尺寸的设备或浏览器开发者工具的响应式模式下测试，确保样式切换符合预期。
媒体查询本质是CSS的条件判断能力，除了响应屏幕尺寸变化，还可以根据设备方向、分辨率、颜色偏好等条件切换样式，开发者可以根据实际需求扩展使用场景。