什么是CSS3媒体查询？
CSS3媒体查询是响应式网页设计的核心技术，它允许开发者根据设备的特性（如屏幕宽度、高度、方向、分辨率等）应用不同的CSS样式。通过媒体查询，我们可以创建能够自动适应不同设备的网页布局，提供最佳的用户体验。
媒体查询的基本语法如下：
@media media-type and (media-feature) {
/* CSS规则 */
}
其中：
media-type
指定媒体类型（如screen、print、all等）
media-feature
指定要检测的设备特性（如max-width、min-width、orientation等）
媒体查询的基本用法
1. 基础示例：根据屏幕宽度改变背景色
/* 默认样式（移动设备） */
body {
background-color: lightblue;
}

/* 平板设备（宽度至少768px） */
@media screen and (min-width: 768px) {
body {
background-color: lightgreen;
}
}

/* 桌面设备（宽度至少1024px） */
@media screen and (min-width: 1024px) {
body {
background-color: lightcoral;
}
}
在这个例子中，页面背景色会根据屏幕宽度自动变化：
手机：浅蓝色
平板：浅绿色
桌面：浅红色
2. 常用媒体特性
特性
描述
示例
width
视口宽度
(min-width: 600px)
height
视口高度
(max-height: 800px)
orientation
设备方向
(orientation: landscape)
resolution
设备分辨率
(min-resolution: 2dppx)
hover
是否支持悬停
(hover: hover)
响应式布局实战技巧
1. 移动优先设计策略
移动优先是响应式设计的核心理念，先为移动设备设计，然后逐步增强到大屏幕：
/* 移动设备样式（默认） */
.container {
width: 100%;
padding: 10px;
}

/* 平板设备 */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
margin: 0 auto;
}
}

/* 桌面设备 */
@media (min-width: 1024px) {
.container {
width: 980px;
padding: 30px;
}
}
2. 弹性网格布局
使用媒体查询创建弹性网格系统：
/* 基础网格 */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}

.col {
flex: 0 0 100%;
padding: 0 10px;
box-sizing: border-box;
}

/* 平板设备：2列 */
@media (min-width: 768px) {
.col {
flex: 0 0 50%;
}
}

/* 桌面设备：4列 */
@media (min-width: 1024px) {
.col {
flex: 0 0 25%;
}
}
3. 图片响应式处理
/* 基础图片样式 */
img {
max-width: 100%;
height: auto;
}

/* 高分辨率设备显示高清图片 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero-image {
background-image: url(‘hero@2x.jpg’);
}
}
4. 导航菜单适配
/* 移动设备：汉堡菜单 */
.nav-menu {
display: none;
}

.nav-toggle {
display: block;
}

/* 桌面设备：完整导航 */
@media (min-width: 1024px) {
.nav-menu {
display: flex;
}

.nav-toggle {
display: none;
}
}
高级媒体查询技巧
1. 方向检测
/* 横屏样式 */
@media (orientation: landscape) {
.hero {
height: 50vh;
}
}

/* 竖屏样式 */
@media (orientation: portrait) {
.hero {
height: 70vh;
}
}
2. 暗色模式支持
/* 默认浅色模式 */
body {
background: white;
color: black;
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #f0f0f0;
}
}
3. 交互能力检测
/* 支持悬停的设备 */
@media (hover: hover) {
.button:hover {
background: darkblue;
}
}

/* 触摸设备 */
@media (hover: none) {
.button:active {
background: darkblue;
}
}
媒体查询最佳实践
1. 使用相对单位
推荐使用rem、em、vw/vh等相对单位，而不是固定的px：
/* 推荐 */
.container {
width: 90vw;
max-width: 1200px;
padding: 2rem;
}

/* 不推荐 */
.container {
width: 960px;
padding: 32px;
}
2. 断点选择策略
常见的响应式断点（可根据项目需求调整）：
/* 小手机： < 480px */ @media (max-width: 479px) { /* ... */ } /* 大手机： 480px - 767px */ @media (min-width: 480px) and (max-width: 767px) { /* ... */ } /* 平板： 768px - 1023px */ @media (min-width: 768px) and (max-width: 1023px) { /* ... */ } /* 桌面： 1024px - 1439px */ @media (min-width: 1024px) and (max-width: 1439px) { /* ... */ } /* 大桌面： >= 1440px */
@media (min-width: 1440px) { /* … */ }
3. 避免过度使用
不要为每个小细节都添加媒体查询，应该：
优先使用弹性布局（Flexbox/Grid）
使用流体布局（百分比、vw/vh）
只在必要时使用媒体查询调整布局
4. 测试策略
/* 调试辅助：显示当前断点 */
body::after {
content: “mobile”;
position: fixed;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.8);
color: white;
padding: 5px 10px;
font-size: 12px;
z-index: 9999;
}

@media (min-width: 768px) {
body::after {
content: “tablet”;
}
}

@media (min-width: 1024px) {
body::after {
content: “desktop”;
}
}
实战案例：完整响应式页面

媒体查询与现代CSS技术结合
1. 与CSS Grid结合
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}

@media (min-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1024px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}
2. 与CSS变量结合
:root {
–primary-color: #3498db;
–spacing: 1rem;
}

@media (min-width: 768px) {
:root {
–spacing: 2rem;
}
}

.card {
background: var(–primary-color);
padding: var(–spacing);
}
3. 与容器查询结合（现代特性）
/* 容器查询允许根据父容器大小而非视口大小应用样式 */
.card-container {
container-type: inline-size;
}

@container (min-width: 400px) {
.card {
display: flex;
gap: 1rem;
}
}
调试和优化技巧
1. 浏览器开发者工具
现代浏览器都提供了设备模拟功能：
Chrome: F12 → 切换设备工具栏
Firefox: F12 → 响应式设计模式
Safari: 开发者工具 → 进入响应式设计模式
2. 性能优化建议
/* 避免不必要的媒体查询嵌套 */
/* 不推荐 */
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 1024px) {
.container {
width: 980px;
}
}
}

/* 推荐 */
@media (min-width: 768px) {
.container {
width: 750px;
}
}

@media (min-width: 1024px) {
.container {
width: 980px;
}
}
3. 代码组织建议
/* 1. 基础样式（移动优先） */
/* 2. 组件样式 */
/* 3. 布局样式 */
/* 4. 媒体查询（按断点从小到大排列） */

/* 示例结构 */
/* 基础样式 */
body { /* … */ }
.container { /* … */ }

/* 组件 */
.button { /* … */ }
.card { /* … */ }

/* 布局 */
.header { /* … */ }
.nav { /* … */ }

/* 断点 */
@media (min-width: 768px) { /* 平板 */ }
@media (min-width: 1024px) { /* 桌面 */ }
总结
CSS3媒体查询是现代响应式网页设计的基石。通过掌握媒体查询，您可以：
创建跨设备兼容的网页
– 从手机到桌面都能提供良好体验
提升用户体验
– 根据设备特性优化界面和交互
维护单一代码库
– 无需为不同设备维护多个版本
提高开发效率
– 使用现代CSS技术快速构建响应式界面
记住响应式设计的核心原则：
移动优先
：从小屏幕开始设计
内容优先
：确保核心内容在所有设备上都可访问
渐进增强
：在基础功能上逐步添加增强特性
性能至上
：优化加载速度和渲染性能
通过不断实践和测试，您将能够熟练运用媒体查询，创建出既美观又实用的响应式网站。