网站开发从零到做邀请函好的网站
CSS3 媒体查询实现响应式布局语法指南
一、媒体查询核心语法
1. 基础语法结构
@media 媒体类型 and (媒体特性) {/* 匹配条件时应用的CSS规则 */
}
2. 媒体类型（可省略）
| 类型值 | 说明 |
|---|---|
all | 所有设备（默认值） |
screen | 屏幕设备 |
print | 打印机设备 |
speech | 屏幕阅读器 |
3. 常用媒体特性
| 特性名称 | 说明 | 单位/值示例 |
|---|---|---|
width | 视口宽度 | px, em, rem |
min-width | 视口最小宽度 | 600px |
max-width | 视口最大宽度 | 1024px |
orientation | 设备方向 | portrait/landscape |
aspect-ratio | 视口宽高比 | 16/9 |
resolution | 设备分辨率 | 300dpi |
hover | 主输入方式是否支持悬停 | hover/none |
4. 逻辑操作符
/* AND逻辑（同时满足） */
@media screen and (min-width: 768px) and (max-width: 1024px) {}/* OR逻辑（逗号分隔） */
@media (max-width: 600px), (orientation: portrait) {}/* NOT逻辑 */
@media not screen and (color) {}
5. 断点设置参考
| 设备类型 | 典型断点范围 |
|---|---|
| 手机（竖屏） | < 576px |
| 手机（横屏） | 576px - 767px |
| 平板 | 768px - 991px |
| 桌面 | 992px - 1199px |
| 大屏桌面 | ≥ 1200px |
二、完整案例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式布局案例</title><style>/* 基础样式 - 移动优先 */* {box-sizing: border-box;margin: 0;padding: 0;}.container {padding: 15px;}/* 导航样式 */.nav {background: #333;padding: 1rem;}.nav-list {list-style: none;display: flex;flex-direction: column; /* 移动端垂直排列 */gap: 10px;}.nav-item {color: white;padding: 0.5rem;text-align: center;background: #666;}/* 主内容区 */.main-content {margin: 20px 0;padding: 15px;background: #f0f0f0;}/* 侧边栏 */.sidebar {padding: 15px;background: #e0e0e0;}/* 平板设备（≥768px） */@media screen and (min-width: 768px) {.nav-list {flex-direction: row; /* 水平排列导航 */justify-content: space-around;}.content-wrapper {display: flex;gap: 20px;}.main-content {flex: 3; /* 主内容占3份 */}.sidebar {flex: 1; /* 侧边栏占1份 */}}/* 桌面设备（≥992px） */@media screen and (min-width: 992px) {.container {max-width: 1200px;margin: 0 auto;}.nav-list {justify-content: flex-start; /* 左对齐导航项 */gap: 30px;}.nav-item {padding: 1rem 2rem;}}/* 大屏幕设备（≥1200px） */@media screen and (min-width: 1200px) {.main-content {font-size: 1.1rem;}.sidebar {padding: 30px;}}/* 打印样式 */@media print {.nav, .sidebar {display: none;}.main-content {background: white;color: black;}}</style>
</head>
<body><nav class="nav"><ul class="nav-list"><li class="nav-item">首页</li><li class="nav-item">产品</li><li class="nav-item">服务</li><li class="nav-item">关于</li></ul></nav><div class="container"><div class="content-wrapper"><main class="main-content"><h2>欢迎访问</h2><p>这是一个响应式布局的演示页面...</p></main><aside class="sidebar"><h3>最新消息</h3><p>响应式设计专题更新...</p></aside></div></div>
</body>
</html>
三、代码注释说明
- 移动优先策略
- 基础样式针对小屏幕设备编写
- 使用flex-direction: column实现垂直布局
- 平板适配（768px+）
- 将导航项改为水平排列
- 创建flex容器实现内容区与侧边栏的并排布局
- 使用flex比例分配空间（3:1）
- 桌面适配（992px+）
- 添加最大宽度限制并居中容器
- 调整导航项的间距和对齐方式
- 增大导航项的点击区域
- 大屏优化（1200px+）
- 增大正文字号提升可读性
- 增加侧边栏内边距
- 打印样式优化
- 隐藏非必要元素（导航、侧边栏）
- 调整背景色保证打印效果
四、注意事项
- 视口设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
必须包含此meta标签才能确保媒体查询在移动端生效
- 单位选择建议
- 优先使用相对单位（rem/em/%）
- 需要精确控制时使用px
- 断点设置技巧
- 根据内容变化设置断点，而非特定设备尺寸
- 使用Chrome开发者工具设备模式进行测试
- 性能优化
- 避免过多的媒体查询分段
- 将公共样式提取到基础规则中
- 现代布局结合
- 配合flexbox/grid布局使用效果更佳
- 结合CSS自定义属性实现动态样式调整
建议通过实际调整浏览器窗口大小，观察不同断点下的布局变化，加深对媒体查询工作机制的理解。
以下是开发中常用的CSS3媒体查询实际案例，结合不同场景和布局需求，提供具体代码实现及说明：
一、多列布局响应式调整
场景：根据屏幕宽度动态调整列数和布局样式
<style>
.container { display: flex; flex-wrap: wrap; }/* 默认四列布局（≥1200px）*/
.box { width: 25%; padding: 15px;border: 2px solid green;
}/* 平板：三列布局（768-1199px） */
@media (max-width: 1199px) {.box { width: 33.33%; border-color: blue;}
}/* 手机横屏：两列布局（480-767px） */
@media (max-width: 767px) {.box { width: 50%; padding: 10px;}
}/* 手机竖屏：单列布局（<480px） */
@media (max-width: 479px) {.box { width: 100%; border-color: red;}
}
</style>
特点：结合Flex布局实现动态列数变化，通过边框颜色直观显示当前布局模式。
二、内容动态显示优化
场景：根据设备宽度显示/隐藏特定内容
/* 桌面端显示完整地址 */
.contact-info::after {content: "（联系电话：400-800-1234）";
}/* 移动端隐藏电话号码 */
@media (max-width: 768px) {.contact-info::after {content: "";}.desktop-only { display: none; }.mobile-only { display: block; }
}
特点：通过伪元素动态调整显示内容，优化移动端信息展示。
三、响应式导航栏改造
场景：移动端折叠菜单与桌面端水平菜单切换
.nav {background: #333;padding: 1rem;
}/* 移动端垂直菜单 */
.nav-list {flex-direction: column;display: none;
}.menu-icon { display: block; }/* 桌面端水平菜单 */
@media (min-width: 992px) {.menu-icon { display: none; }.nav-list {display: flex;flex-direction: row;gap: 2rem;}
}
特点：通过媒体查询实现导航栏形态切换，配合JavaScript实现移动端菜单交互。
四、打印样式优化
场景：优化页面打印效果
@media print {.ad-banner, .side-menu {display: none;}body {font-size: 12pt;line-height: 1.5;color: #000;background: none;}a::after {content: " (" attr(href) ")";}
}
特点：隐藏非必要元素、调整文字样式、自动显示链接地址。
五、高清屏幕适配
场景：为Retina屏幕提供高清图片
.logo {background-image: url(logo.png);
}@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) { .logo {background-image: url(logo@2x.png);background-size: contain;}
}
特点：通过分辨率检测适配高清显示屏。
六、方向检测布局
场景：根据设备方向调整布局
/* 竖屏布局 */
@media (orientation: portrait) {.gallery {grid-template-columns: 1fr;}
}/* 横屏布局 */
@media (orientation: landscape) {.gallery {grid-template-columns: repeat(3, 1fr);}
}
特点：利用设备方向特性优化内容展示方式。
最佳实践建议：
- 采用移动优先策略，先编写基础样式再添加媒体查询扩展
- 使用相对单位（rem/%）而非固定像素值
- 结合CSS Grid/Flexbox实现复杂响应式布局
- 通过Chrome DevTools设备模式测试多断点效果
- 对IE等老旧浏览器使用Respond.js兼容方案