css中的媒体查询是CSS3引入的重要特性，它能够检测用户设备的相关特征，比如屏幕宽度、设备像素比、横竖屏状态等，然后根据检测结果匹配对应的CSS样式规则，让页面在不同设备上都能呈现出合适的布局和样式效果，是响应式网页开发的核心技术手段。
媒体查询的核心作用
在早期的网页开发中，页面通常只适配固定的桌面端屏幕宽度，当用户用手机或者平板访问时，要么需要手动缩放页面，要么页面出现横向滚动条，体验很差。媒体查询的出现解决了这个问题，它可以让开发者针对不同的设备特征编写差异化的样式，不需要为不同设备单独开发多套页面，大大降低了开发和维护成本。
媒体查询的基本语法
媒体查询的基础语法结构由@media规则组成，基本格式如下：
/* 基础语法结构 */
@media 媒体类型 and (媒体特征条件) {
/* 匹配条件时生效的CSS样式 */
}
常见的媒体类型
媒体类型用于指定规则适用的设备类别，常用的有以下几种：
- all：所有设备，默认值，如果不写媒体类型则默认是all
- screen：屏幕设备，包括电脑、手机、平板等带屏幕的设备，是最常用的类型
- print：打印设备，用于设置页面打印时的样式
- speech：屏幕阅读器等语音输出设备
常用的媒体特征条件
媒体特征条件用于判断设备的具体特征，多个条件可以用and连接，也可以用not取反，only用于兼容旧版本浏览器。常用的媒体特征如下：
| 媒体特征 | 说明 |
|---|---|
| width | 设备视口宽度，比如width: 375px表示视口宽度等于375px时匹配 |
| min-width | 视口最小宽度，大于等于该值时匹配 |
| max-width | 视口最大宽度，小于等于该值时匹配 |
| device-pixel-ratio | 设备像素比，用于适配高清屏幕，比如2表示2倍屏 |
| orientation | 横竖屏状态，值为portrait（竖屏）或landscape（横屏） |
媒体查询的实际使用示例
下面通过一个实际的响应式布局案例，展示媒体查询的具体用法。假设我们有一个页面，桌面端显示三列布局，平板端显示两列布局，手机端显示一列布局。
HTML结构代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item">内容块1</div>
<div class="item">内容块2</div>
<div class="item">内容块3</div>
</div>
</body>
</html>
CSS样式代码（含媒体查询）
/* 基础样式，移动端优先，默认是一列布局 */
.container {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
.item {
height: 120px;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
/* 平板设备，视口宽度大于等于768px时，改为两列布局 */
@media screen and (min-width: 768px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: calc(50% - 8px);
}
}
/* 桌面设备，视口宽度大于等于1200px时，改为三列布局 */
@media screen and (min-width: 1200px) {
.item {
width: calc(33.333% - 11px);
}
}
/* 横屏状态下的额外样式，视口宽度小于768px且为横屏时调整字体大小 */
@media screen and (max-width: 767px) and (orientation: landscape) {
.item {
font-size: 16px;
height: 80px;
}
}
媒体查询的使用注意事项
在使用媒体查询时，有几个常见的注意点需要开发者关注：
- 移动端适配时建议采用移动优先策略，先写小屏幕的基础样式，再用
min-width逐步适配大屏幕，这样代码逻辑更清晰，也更符合渐进增强的原则 - 设置视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">是使用媒体查询适配移动端的前提，否则媒体查询检测到的视口宽度可能不是设备的实际宽度 - 媒体查询的断点设置不要针对具体的设备型号，而是根据页面的内容布局变化来设置，比如当页面内容出现拥挤或者留白过多时，再设置对应的断点
- 复杂的媒体查询条件可以拆分到不同的
@media规则中，或者拆分成独立的CSS文件通过media属性引入，提升代码的可维护性
媒体查询的其他引入方式
除了在CSS文件中直接写@media规则，还可以在HTML中通过link标签的media属性引入不同场景的样式文件：
<!-- 屏幕宽度大于等于1200px时加载桌面端样式 --> <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1200px)"> <!-- 屏幕宽度小于768px时加载移动端样式 --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)">
这种方式适合样式文件体积较大、不同场景样式差异明显的项目，可以减少不必要的样式加载，提升页面加载性能。
CSS媒体查询media_query响应式布局修改时间：2026-07-01 20:30:36