媒体查询完整使用指南
一、基本语法结构
css
/* 语法格式 */@media 媒体类型 and (媒体特性) {
/* CSS 样式规则 */}二、媒体类型（可选，现代开发通常省略）
css
/* all - 所有设备（默认，可省略） */@media all and (max-width: 600px) { }/* screen - 屏幕（电脑、手机、平板） */@media screen and (max-width: 600px) { }/* print - 打印预览模式 */@media print {
.no-print { display: none; } /* 打印时隐藏 */}/* speech - 屏幕阅读器 */@media speech { }💡 现代写法：通常省略
screen，直接写@media (max-width: 600px)
三、逻辑运算符
1. and - 并且（所有条件都满足）
css
/* 宽度在 768px 到 1024px 之间 */@media (min-width: 768px) and (max-width: 1024px) {
.container { width: 90%; }}2. , 逗号 - 或者（任一条件满足）
css
/* 宽度 ≤ 600px 或者 宽度 ≥ 1200px */@media (max-width: 600px), (min-width: 1200px) {
.sidebar { display: none; }}3. not - 否定（条件不满足时）
css
/* 不是打印模式 */@media not print {
.header { background: white; }}/* 宽度不是 ≤ 600px（即 > 600px） */@media not (max-width: 600px) { }4. only - 仅（兼容旧浏览器）
css
/* 防止旧浏览器解析媒体查询 */@media only screen and (max-width: 600px) { }四、常用媒体特性
| 特性 | 说明 | 示例 |
|---|---|---|
width | 视口宽度 | (width: 375px) |
min-width | 最小宽度 | (min-width: 768px) |
max-width | 最大宽度 | (max-width: 480px) |
height | 视口高度 | (min-height: 600px) |
orientation | 屏幕方向 | (orientation: portrait) |
aspect-ratio | 宽高比 | (min-aspect-ratio: 16/9) |
resolution | 分辨率 | (min-resolution: 2dppx) |
hover | 是否支持悬停 | (hover: hover) |
pointer | 指针精度 | (pointer: fine) |
五、常见响应式断点方案
css
/* 1. 手机小屏（≤ 480px） */@media (max-width: 480px) {
body { font-size: 14px; }
.container { padding: 10px; }}/* 2. 手机横屏/小平板（481px - 768px） */@media (min-width: 481px) and (max-width: 768px) {
body { font-size: 15px; }
.container { padding: 15px; }}/* 3. 平板（769px - 1024px） */@media (min-width: 769px) and (max-width: 1024px) {
body { font-size: 16px; }
.container { width: 90%; }}/* 4. 桌面（1025px - 1200px） */@media (min-width: 1025px) and (max-width: 1200px) {
.container { width: 1100px; margin: 0 auto; }}/* 5. 大屏（≥ 1201px） */@media (min-width: 1201px) {
.container { width: 1200px; margin: 0 auto; }}六、移动优先 vs 桌面优先
移动优先（推荐 ✅）
css
/* 默认：手机样式（基础） */.container { width: 100%; }.title { font-size: 18px; }/* 平板：覆盖部分样式 */@media (min-width: 768px) {
.container { width: 90%; max-width: 720px; margin: 0 auto; }
.title { font-size: 24px; }}/* 桌面：进一步覆盖 */@media (min-width: 1024px) {
.container { max-width: 960px; }
.title { font-size: 32px; }}桌面优先
css
/* 默认：桌面样式 */.container { width: 1200px; }/* 平板：缩小 */@media (max-width: 1024px) {
.container { width: 90%; }}/* 手机：进一步缩小 */@media (max-width: 768px) {
.container { width: 100%; padding: 10px; }}七、实战完整示例
html
<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 基础样式（所有设备） */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.5;
}
.header {
background: #3b82f6;
color: white;
text-align: center;
}
.container {
display: flex;
gap: 20px;
}
.main { flex: 3; }
.sidebar { flex: 1; background: #f3f4f6; }
/* ========== 手机（≤ 768px）========== */
@media (max-width: 768px) {
.container {
flex-direction: column; /* 垂直排列 */
}
.header {
padding: 20px;
}
.header h1 {
font-size: 1.5rem;
}
.main, .sidebar {
padding: 15px;
}
}
/* ========== 平板（769px - 1024px）========== */
@media (min-width: 769px) and (max-width: 1024px) {
.container {
flex-direction: row;
}
.header {
padding: 30px;
}
.header h1 {
font-size: 2rem;
}
.main, .sidebar {
padding: 20px;
}
}
/* ========== 桌面（≥ 1025px）========== */
@media (min-width: 1025px) {
.container {
max-width: 1200px;
margin: 0 auto;
flex-direction: row;
}
.header {
padding: 40px;
}
.header h1 {
font-size: 2.5rem;
}
.main, .sidebar {
padding: 25px;
}
/* 桌面独有的悬停效果 */
.sidebar:hover {
background: #e5e7eb;
transition: 0.3s;
}
}
/* ========== 横屏模式 ========== */
@media (orientation: landscape) and (max-height: 500px) {
.header {
padding: 10px;
}
.header h1 {
font-size: 1.2rem;
}
}
/* ========== 暗色模式 ========== */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #e0e0e0;
}
.sidebar {
background: #2d2d2d;
}
}
/* ========== 高分辨率屏幕（Retina）========== */
@media (min-resolution: 2dppx) {
.logo {
background-image: url('logo@2x.png');
}
}
/* ========== 打印样式 ========== */
@media print {
.header, .sidebar {
background: white;
color: black;
}
.no-print {
display: none;
}
} </style></head><body>
<div class="header">
<h1>响应式网站</h1>
</div>
<div class="container">
<main class="main">
<h2>主要内容</h2>
<p>这段内容会在不同屏幕尺寸下自适应布局</p>
</main>
<aside class="sidebar">
<h3>侧边栏</h3>
<p>在手机上会移动到主内容下方</p>
</aside>
</div>
<div class="no-print">
<button>打印时这个按钮会隐藏</button>
</div></body></html>八、重要注意事项
css
/* ❌ 错误：缺少 meta 视口标签 *//* 在 HTML 的 <head> 中必须添加： */<meta name="viewport" content="width=device-width, initial-scale=1.0">/* ✅ 正确写法 *//* 1. 优先级问题：媒体查询写在后面会覆盖前面的相同规则 */.container { width: 100%; } /* 基础 */@media (min-width: 768px) {
.container { width: 90%; } /* 覆盖基础 */}/* 2. 单位可以用 px、em、rem */@media (min-width: 48em) { } /* 48em = 768px（假设1em=16px） *//* 3. 可以组合多个条件 */@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { }/* 4. 不连续的范围写法（新语法，浏览器支持有限） */@media (width >= 768px) and (width <= 1024px) { } /* 新语法 */@media (768px <= width <= 1024px) { } /* 最新语法 */九、调试技巧
css
/* 添加调试边框，查看当前断点 */body::before {
content: "手机模式";
position: fixed;
bottom: 10px;
right: 10px;
background: black;
color: white;
padding: 5px 10px;
font-size: 12px;
z-index: 9999;}@media (min-width: 768px) {
body::before { content: "平板模式"; }}@media (min-width: 1024px) {
body::before { content: "桌面模式"; }}总结
| 原则 | 说明 |
|---|---|
| 移动优先 | 先写手机样式，再用 min-width 逐步增强 |
| 添加 viewport | width=device-width 是响应式的基础 |
| 使用相对单位 | %、vw、rem 比 px 更灵活 |
| 测试真实设备 | Chrome 开发者工具模拟器不够完美 |
| 断点基于内容 | 不要照搬固定断点，根据你的设计内容来定 |
掌握了这些，你就可以写出完美的响应式网站了！