在现代网页开发中，响应式设计（Responsive Design） 是提升用户体验的关键。而实现响应式布局的核心技术之一就是 媒体查询（Media Queries）。
本文将带你深入理解什么是媒体查询、它的语法结构、使用方式以及最佳实践，帮助你写出更灵活、适配性更强的 CSS 样式代码。
📌 一、什么是媒体查询？
媒体查询（Media Queries） 是 CSS3 中引入的一项功能，它允许我们根据设备的特性（如屏幕宽度、高度、分辨率、方向等）来应用不同的样式规则。
换句话说：
“根据不同设备的显示条件，展示不同的样式。”
✅ 媒体查询的作用：
- 实现响应式网页布局；
- 针对不同分辨率设备提供优化的视觉效果；
- 提升移动端和桌面端用户的体验；
- 动态适应浏览器窗口大小变化；
🧩 二、媒体查询的基本语法
@media [媒体类型] and ([媒体特征表达式]) {
/* 当条件满足时，这里面的样式才会生效 */
}
🔹 常见媒体类型（media type）：
| 类型 | 描述 |
|---|---|
all | 所有设备（默认值） |
screen | 屏幕设备（如电脑、手机） |
print | 打印设备 |
speech | 屏幕阅读器等“语音合成器” |
在实际开发中，最常用的是
screen。
🎯 三、常见媒体特征（Media Features）
| 特征名 | 描述 |
|---|---|
width / height | 视口的宽度/高度 |
min-width / max-width | 最小/最大视口宽度 |
orientation | 设备方向（portrait 竖屏 / landscape 横屏） |
aspect-ratio | 宽高比（如 16/9） |
resolution | 分辨率（如 2dppx 表示高清屏） |
device-width | 设备物理宽度（不推荐使用） |
📦 四、媒体查询的使用方式
✅ 方式一：在 <style> 标签中使用（内联样式）
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
📌 适用于页面局部样式调整。
✅ 方式二：通过 <link> 引入外部样式表（分离样式）
<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 801px)" href="desktop.css">
📌 适用于大型项目或需要完全分离不同设备样式的场景。
✅ 方式三：组合多个媒体特征
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 平板设备样式 */
}
📌 可以自由组合多个条件，实现更精细的控制。
📐 五、典型断点设置（Breakpoints）
| 设备类型 | 推荐断点范围 |
|---|---|
| 移动端（竖屏） | max-width: 576px |
| 移动端（横屏） | min-width: 576px 和 max-width: 768px |
| 平板 | min-width: 768px 和 max-width: 1024px |
| 小型桌面 | min-width: 1024px 和 max-width: 1200px |
| 大型桌面 | min-width: 1200px |
📌 示例写法：
/* 移动端样式 */
@media (max-width: 767px) {
...
}
/* 平板样式 */
@media (min-width: 768px) and (max-width: 1024px) {
...
}
/* 桌面样式 */
@media (min-width: 1025px) {
...
}
🚀 六、媒体查询的高级用法
✅ 1. 使用 not 否定查询条件
@media not print and (color) {
/* 不是打印设备，并且支持颜色的设备才应用此样式 */
}
✅ 2. 使用 only 避免旧版浏览器误读
<link rel="stylesheet" media="only screen and (max-width: 600px)" href="mobile.css">
📌 only 的作用是防止老旧浏览器加载响应式样式。
📈 七、媒体查询与响应式框架的关系
很多主流响应式框架（如 Bootstrap、Foundation）都基于媒体查询构建了网格系统和组件样式，例如：
- Bootstrap 的栅格系统使用以下断点：
xs: < 576pxsm: ≥ 576pxmd: ≥ 768pxlg: ≥ 992pxxl: ≥ 1200pxxxl: ≥ 1400px
📌 这些框架底层其实就是通过媒体查询实现了不同尺寸下的布局切换。
💡 八、最佳实践建议
| 建议内容 | 说明 |
|---|---|
| ✅ 移动优先（Mobile First） | 优先编写移动端样式，再逐步增强大屏样式 |
| ✅ 使用相对单位（em, rem, %, vw/vh） | 更加灵活地适应不同设备 |
| ✅ 组织清晰的媒体查询结构 | 如按模块分组、按断点分层 |
| ✅ 避免重复定义相同样式 | 利用继承和通用类减少冗余 |
| ✅ 使用变量管理断点（配合预处理器） | 如 Sass 变量 $breakpoint-sm |
