CSS3 媒体查询（Media Queries）是实现响应式布局的核心技术，它允许根据设备的特性（如屏幕宽度、高度、分辨率、方向等）为不同场景应用不同的 CSS 样式，使页面在手机、平板、电脑等设备上都能良好展示。
一、媒体查询的基本语法
媒体查询的核心是通过 @media 规则定义 “条件”，当条件满足时，内部的 CSS 样式才会生效。
/* 外部样式表中 */
@media [媒体类型] and (媒体特性) {
/* 满足条件时生效的 CSS 样式 */
选择器 {
属性: 值;
}
}
-
媒体类型（可选）：指定设备类型，常用值：
all：所有设备（默认值）screen：屏幕设备（如电脑、手机、平板）print：打印设备
-
媒体特性（必选）：通过
and连接的条件，如屏幕宽度、方向等，需用括号()包裹。
二、常用媒体特性（条件判断）
媒体查询的核心是通过 “媒体特性” 判断设备状态，最常用的有：
| 媒体特性 | 说明 | 示例 |
|---|---|---|
min-width / max-width | 最小视口宽度 / 最大视口宽度 | (max-width: 768px)（宽度≤768px 时生效） |
min-height / max-height | 最小视口高度 / 最大视口高度 | (min-height: 600px)（高度≥600px 时生效） |
orientation | 设备方向 | (orientation: portrait)（竖屏，高度 > 宽度）；(landscape)（横屏，宽度 > 高度） |
device-pixel-ratio | 设备像素比（如 Retina 屏幕） | (device-pixel-ratio: 2)（像素比为 2 时） |
三、使用方式
1. 内嵌在 CSS 中（推荐）
直接在样式表中通过 @media 定义不同条件的样式：
/* 默认样式（适用于大屏幕） */
.container {
width: 1200px;
margin: 0 auto;
}
/* 当屏幕宽度 ≤ 992px 时（如平板） */
@media screen and (max-width: 992px) {
.container {
width: 900px;
}
}
/* 当屏幕宽度 ≤ 768px 时（如手机） */
@media (max-width: 768px) { /* 省略 media type，默认 all */
.container {
width: 100%;
padding: 0 15px;
}
}
2. 链接外部样式表（按条件加载）
在 HTML 的 <link> 标签中通过 media 属性指定加载条件，仅当条件满足时才加载对应样式表：
<!-- 默认样式表 -->
<link rel="stylesheet" href="style.css">
<!-- 屏幕宽度 ≤ 768px 时加载手机样式表 -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
3. 嵌套在选择器中（较少用）
在单个选择器中通过媒体查询添加条件样式：
.box {
font-size: 16px;
}
/* 屏幕宽度 ≤ 576px 时，.box 的字体变大 */
.box @media (max-width: 576px) {
font-size: 18px;
}
四、逻辑运算符（组合条件）
媒体查询支持通过逻辑运算符组合多个条件，实现更精确的判断：
and：同时满足多个条件
/* 屏幕宽度在 768px ~ 992px 之间（平板横屏） */
@media (min-width: 768px) and (max-width: 992px) {
/* 样式 */
}
, （或 or）：满足任一条件
/* 屏幕宽度 ≤ 576px 或竖屏状态 */
@media (max-width: 576px), (orientation: portrait) {
/* 样式 */
}
not：否定整个条件（不常用）
/* 不满足（屏幕宽度 > 768px）时生效（即 ≤768px 时） */
@media not all and (min-width: 768px) {
/* 样式 */
}
五、响应式设计的常见断点（Breakpoints）
实际开发中，通常根据主流设备宽度设置 “断点”，以下是行业通用的断点参考：
/* 超小屏幕（手机，<576px） */
@media (max-width: 575.98px) { ... }
/* 小屏幕（平板竖屏，≥576px） */
@media (min-width: 576px) and (max-width: 767.98px) { ... }
/* 中等屏幕（平板横屏，≥768px） */
@media (min-width: 768px) and (max-width: 991.98px) { ... }
/* 大屏幕（桌面，≥992px） */
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
/* 超大屏幕（大桌面，≥1200px） */
@media (min-width: 1200px) { ... }
六、注意事项
- 设置视口（viewport） ：在 HTML 的
<head>中必须添加视口标签，否则移动设备会按桌面尺寸缩放页面，媒体查询失效
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：让页面宽度等于设备宽度initial-scale=1.0：初始缩放比例为 1（不缩放）
- 移动优先 vs 桌面优先：
- 移动优先：先写手机样式，再用
min-width扩展大屏幕样式（推荐）
/* 手机默认样式 */
.box { width: 100%; }
/* 平板及以上 */
@media (min-width: 768px) {
.box { width: 50%; }
}
- 桌面优先：先写桌面样式，再用
max-width适配小屏幕
- 避免过度使用：过多断点会增加代码复杂度，建议按核心设备尺寸设置 3-5 个断点即可。
