CSS 媒体查询完全指南：从设备断点到现代响应式策略
Introduction
CSS 媒体查询（Media Queries）是响应式设计的核心技术，允许根据设备特性（屏幕宽度、高度、分辨率、方向等）有条件地应用样式。从最早的"打印样式表"场景发展而来，媒体查询已成为移动优先设计、可访问性适配、性能优化的重要工具。本文覆盖媒体查询全部语法、常用断点策略及现代 CSS 新特性。
媒体查询基础语法
/* 方式1：CSS 文件级媒体查询 */
@import url('tablet.css') screen and (min-width: 768px);
/* 方式2：<link> 标签 */
<link rel="stylesheet" media="screen and (min-width: 768px)" href="tablet.css">
/* 方式3：CSS 内嵌（最常用，推荐）*/
.container { padding: 0 15px; }
@media (min-width: 576px) { .container { max-width: 540px; margin: 0 auto; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
/* 方式4：JavaScript 中检测 */
if (window.matchMedia('(min-width: 768px)').matches) {
console.log('桌面端');
}
常用媒体特性
/* 宽度/高度（最常用）*/
@media (min-width: 768px) { ... }
@media (max-width: 767px) { ... }
/* 方向 */
@media (orientation: portrait) { /* 竖屏 */ }
@media (orientation: landscape) { /* 横屏 */ }
/* 分辨率（Retina 屏）*/
@media (min-resolution: 2dppx) { /* 2倍分辨率 */ }
/* 交互方式 */
@media (hover: hover) { /* 鼠标悬停设备 */ }
@media (pointer: coarse) { /* 触屏设备 */ }
移动优先策略
/* 移动优先：先写移动端基础样式，再为大屏追加 */
body { font-size: 14px; }
@media (min-width: 768px) { body { font-size: 16px; } }
@media (min-width: 1200px) { body { font-size: 18px; } }
/* clamp() 实现流式字体（无需媒体查询）*/
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/* 容器查询（Container Queries，CSS 新特性）*/
@container card (min-width: 300px) {
.card { display: flex; }
}
常见断点参考值
/* Bootstrap 5 */
/* 576px / 768px / 992px / 1200px / 1400px */
/* Tailwind CSS */
/* 640px(sm) / 768px(md) / 1024px(lg) / 1280px(xl) / 1536px(2xl) */
常见问题
- min-width vs max-width：移动优先用 min-width（从小往大写），桌面优先用 max-width。推荐移动优先，减少样式覆盖。
- 容器查询 vs 媒体查询：媒体查询基于视口宽度，容器查询基于组件父容器宽度。容器查询让组件真正可复用。
- 打印样式：@media print { ... } 单独写打印样式，设置背景为白色、隐藏导航和按钮。
- MDN 媒体查询：MDN Media Queries
- 容器查询：CSS Container Queries