【Web】理解CSS媒体查询
CSS 媒体查询（Media Queries） 是实现响应式设计的核心技术，它允许你根据设备的特性（如屏幕宽度、分辨率、横竖屏等）条件性地应用 CSS 样式。简单来说，它让你可以对不同的设备“说不同的话”。
1. 什么是媒体查询？
媒体查询像是 CSS 的“如果-那么”语句：
- 如果 屏幕宽度小于 768 像素，那么 使用单栏布局。
- 如果 屏幕宽度大于 1024 像素，那么 使用多栏布局。
2. 基本语法
媒体查询由 @media 规则 和 媒体特性 组成。常见语法：
@media (条件) { /* 满足条件时应用的 CSS */ }示W例：
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media (max-width: 768px) { body { background-color: lightblue; /* 手机上背景变浅蓝 */ }
}3. 常用媒体特性
| 特性 | 描述 | 例子 |
|---|---|---|
width | 屏幕宽度 | @media (max-width: 768px) |
height | 屏幕高度 | @media (min-height: 600px) |
orientation | 横屏或竖屏 | @media (orientation: landscape) |
device-width | 设备物理宽度（少用，不如 width 灵活） | @media (max-device-width: 480px) |
4. 示例：响应式布局断点
以下是典型的响应式布局断点设置（结合 Bootstrap 等框架的常见做法）：
/* 手机（竖屏） */
@media (max-width: 767px) { .container { width: 100%; padding: 10px; } .navbar { display: none; /* 隐藏导航栏，用汉堡菜单替代 */ }
}
/* 平板（横屏） */
@media (min-width: 768px) and (max-width: 1023px) { .container {width: 90%; } .sidebar { display: block; /* 显示侧边栏 */ }
}
/* 桌面 */
@media (min-width: 1024px) { .container { width: 80%; max-width: 1200px; margin: 0 auto; } .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 列商品 */ }
}5. 逻辑操作符
媒体查询支持逻辑操作符，让条件更灵活：
and：同时满足多个条件。@media (min-width: 768px) and (orientation: landscape) { /* 平板横屏时应用 */ },（或）：满足任一条件。@media (max-width: 600px), (orientation: portrait) { /* 手机竖屏或任何宽度小于 600px 的设备 */ }not：排除某个条件。@media not (min-width: 768px) { /* 非桌面设备（手机和平板竖屏） */ }
6. 移动优先 vs 桌面优先
移动优先（推荐）
先写手机样式（基础样式），再用 min-width 逐步增强桌面样式：
/* 基础样式（手机） */
body { font-size: 14px; }
/* 平板及以上 */@media (min-width: 768px) { body { font-size: 16px; }
}
/* 桌面 */
@media (min-width: 1024px) { body { font-size: 18px; }
}桌面优先（传统）
先写桌面样式，再用 max-width 适配小屏幕：
/* 基础样式（桌面） */
body { font-size: 18px; }
/* 平板 */
@media (max-width: 1023px) { body { font-size: 16px; }
}
/* 手机 */
@media (max-width: 767px) { body { font-size: 14px; }
}7. 实际应用案例
案例 1：导航栏适配
/* 手机上隐藏导航链接，显示汉堡菜单 */
.nav-links { display: none; }
@media (min-width: 768px) { .nav-links { display: flex; /* 桌面上显示导航链接 */ } .hamburger { display: none; /* 隐藏汉堡菜单 */ }
}案例 2：图片自适应
img { max-width: 100%; /* 图片不超过容器宽度 */
}
/* 高分屏（如 Retina）加载高清图 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo { background-image: url('logo@2x.png'); }
}8. 媒体查询的高级用法
结合媒体类型
媒体查询可以指定设备类型（如屏幕、打印机）：
@media screen and (max-width: 768px) { /* 仅屏幕设备，宽度 ≤ 768px */
}
@media print {
/* 打印时应用的样式 */ body { font-size: 12pt; } .no-print { display: none; } /* 隐藏“不打印”元素 */
}使用相对单位（em/rem）
避免固定像素，用 em 或 rem 更灵活：
@media (max-width: 60em) {/* 60em ≈ 960px（假设基准字体 16px） */ .container { width: 90%; }
}9. 注意：
通过现有数据分析用户设备宽度，设置合理的断点。 例子：如果 80% 用户使用 360–768px 设备，就优先适配这个范围。
媒体查询本身不影响性能，但过度嵌套或复杂样式会增加渲染时间。 因此我们要注意精简 CSS，一般只需 2–3 个关键断点（如 768px、1024px），避免代码臃肿。
平板用户可能横屏浏览，需测试
orientation: landscape。- 不能只关注宽度，高度（如
min-height）和分辨率（如resolution）也很重要。
10.总结
媒体查询 = CSS 的条件判断，让网页自动适应设备。