CSS媒体查询是响应式布局的核心实现方式，它能够根据设备的显示特征匹配对应的CSS规则，让同一个网页在不同尺寸的屏幕上呈现出合适的布局效果，避免移动端出现内容溢出、排版错乱的问题。
媒体查询的基本语法
媒体查询的核心是通过@media规则包裹对应的样式代码，基础语法结构如下：
/* 基础语法 */
@media 媒体类型 and (媒体特征) {
/* 匹配条件时生效的样式 */
}
常用的媒体类型是screen，表示针对屏幕设备，也可以省略不写，默认就是匹配屏幕。常见的媒体特征包括屏幕宽度width、最小宽度min-width、最大宽度max-width、分辨率等，其中min-width和max-width是最常用于响应式布局的特征。
常见的响应式断点设置
为了让网页适配主流设备，通常会设置几个常见的断点，不同断点对应不同的屏幕范围，以下是行业内常用的断点划分方式：
| 断点范围 | 对应设备 | 常用媒体查询写法 |
|---|---|---|
| 小于768px | 手机竖屏 | @media (max-width: 767px) |
| 768px-991px | 平板竖屏 | @media (min-width: 768px) and (max-width: 991px) |
| 992px-1199px | 平板横屏/小屏电脑 | @media (min-width: 992px) and (max-width: 1199px) |
| 大于等于1200px | 大屏电脑 | @media (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>
/* 默认大屏样式：两栏布局 */
.container {
width: 1200px;
margin: 0 auto;
display: flex;
gap: 20px;
}
.sidebar {
width: 300px;
background-color: #f0f0f0;
padding: 20px;
}
.main {
flex: 1;
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
}
/* 平板横屏/小屏电脑：容器宽度自适应，侧边栏宽度调整 */
@media (min-width: 992px) and (max-width: 1199px) {
.container {
width: 960px;
}
.sidebar {
width: 250px;
}
}
/* 平板竖屏：容器宽度自适应，侧边栏宽度进一步调整 */
@media (min-width: 768px) and (max-width: 991px) {
.container {
width: 720px;
}
.sidebar {
width: 200px;
}
}
/* 手机端：切换为单栏布局，侧边栏放到主内容下方 */
@media (max-width: 767px) {
.container {
width: 100%;
padding: 0 15px;
flex-direction: column;
}
.sidebar {
width: 100%;
margin-top: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h3>侧边栏</h3>
<p>这里是侧边栏的内容区域</p>
</div>
<div class="main">
<h3>主内容区</h3>
<p>这里是主内容区域，在大屏下和侧边栏并排显示，在手机端会切换为上下排列</p>
</div>
</div>
</body>
</html>
媒体查询的注意事项
- 移动端页面需要添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">标签，否则媒体查询在移动设备上不会生效。 - 建议使用
min-width作为断点判断条件，采用移动端优先的写法，先写小屏的基础样式，再逐步添加大屏的样式，减少代码冗余。 - 媒体查询的断点不需要完全照搬通用标准，可以根据自己项目的实际内容调整，只要保证页面在不同屏幕下展示正常即可。
- 复杂的响应式布局可以结合CSS Grid、Flex布局一起使用，媒体查询只负责调整布局参数，不需要重复写大量基础样式。
移动端优先的写法示例
移动端优先是指先写手机端的样式，再通过min-width逐步添加更大屏幕的样式，示例如下：
/* 手机端默认样式：单栏布局 */
.container {
padding: 0 15px;
}
.sidebar, .main {
width: 100%;
margin-bottom: 20px;
}
/* 平板及以上：两栏布局 */
@media (min-width: 768px) {
.container {
width: 720px;
margin: 0 auto;
display: flex;
gap: 20px;
}
.sidebar {
width: 200px;
margin-bottom: 0;
}
.main {
flex: 1;
width: auto;
}
}
/* 大屏电脑：调整容器宽度 */
@media (min-width: 1200px) {
.container {
width: 1200px;
}
.sidebar {
width: 300px;
}
}