CSS媒体查询

CSS媒体查询

CSS媒体查询（Media Queries）是CSS3引入的一项强大功能，它允许开发者根据设备的特性（如屏幕宽度、高度、方向、分辨率等）来应用不同的样式规则。通过媒体查询，可以创建响应式设计（Responsive Design），使网页能够适应各种设备（从手机到桌面显示器）的显示需求。

介绍

媒体查询的核心思想是条件性应用CSS样式。当指定的条件（如屏幕宽度小于768px）满足时，对应的CSS规则将被应用。这使得开发者可以为不同设备提供优化的布局和样式，而无需创建多个独立的网页版本。

媒体查询通常与以下设备特性结合使用：

• width / height：视口（viewport）的宽度和高度
• device-width / device-height：设备的实际宽度和高度
• orientation：设备方向（portrait或landscape）
• resolution：设备的分辨率
• aspect-ratio：视口的宽高比

基本语法

媒体查询的基本语法如下：

@media media-type and (media-feature-rule) {
  /* CSS规则 */
}

其中：

• media-type：指定媒体类型（如screen、print等），现代浏览器中通常使用screen或all
• media-feature-rule：定义具体的条件

示例1：基于宽度的查询

/* 默认样式（移动优先） */
body {
  background-color: lightblue;
}

/* 当屏幕宽度至少为600px时应用的样式 */
@media screen and (min-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

/* 当屏幕宽度至少为900px时应用的样式 */
@media screen and (min-width: 900px) {
  body {
    background-color: lavender;
  }
}

输出效果：

• 屏幕宽度 < 600px：浅蓝色背景
• 600px ≤ 宽度 < 900px：浅绿色背景
• 宽度 ≥ 900px：淡紫色背景

常用媒体特性

以下是响应式设计中最常用的媒体特性：

特性	描述	示例	min-width	视口宽度大于等于指定值时匹配	@media (min-width: 768px)	max-width	视口宽度小于等于指定值时匹配	@media (max-width: 767px)	orientation	设备方向（portrait或landscape）	@media (orientation: landscape)	prefers-color-scheme	检测用户是否请求浅色或深色主题	@media (prefers-color-scheme: dark)

逻辑运算符

媒体查询支持使用逻辑运算符组合多个条件：

• and：同时满足多个条件
• 逗号（,）：相当于OR运算
• not：否定查询

示例2：组合查询

/* 横屏且宽度至少为700px */
@media (orientation: landscape) and (min-width: 700px) {
  body {
    font-size: 18px;
  }
}

/* 宽度小于600px或大于900px */
@media (max-width: 599px), (min-width: 900px) {
  .sidebar {
    display: none;
  }
}

断点选择

响应式设计中的断点（breakpoints）是指布局发生变化的特定宽度。常见的断点策略：

graph LR A[移动设备] -->|小于576px| B[超小设备] B -->|576-767px| C[小型设备] C -->|768-991px| D[平板] D -->|992-1199px| E[桌面] E -->|1200px+| F[大桌面]

基于Bootstrap框架的常用断点：

/* 超小设备（手机，小于576px） */
/* 无媒体查询，这是移动优先的默认样式 */

/* 小型设备（竖屏平板，≥576px） */
@media (min-width: 576px) { ... }

/* 中型设备（横屏平板，≥768px） */
@media (min-width: 768px) { ... }

/* 大型设备（桌面，≥992px） */
@media (min-width: 992px) { ... }

/* 超大设备（大桌面，≥1200px） */
@media (min-width: 1200px) { ... }

实际应用案例

案例1：响应式导航栏

一个常见的应用是在小屏幕上显示汉堡菜单，在大屏幕上显示水平导航：

/* 移动样式：隐藏导航项，显示菜单按钮 */
.nav-items {
  display: none;
}
.menu-button {
  display: block;
}

/* 桌面样式：显示导航项，隐藏菜单按钮 */
@media (min-width: 768px) {
  .nav-items {
    display: flex;
  }
  .menu-button {
    display: none;
  }
}

案例2：网格布局调整

在不同屏幕尺寸下调整网格列数：

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

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

高级技巧

1. 使用相对单位

在媒体查询中使用em单位而非px可以使设计更加灵活，因为em基于用户的字体大小设置：

@media (min-width: 48em) { /* 约768px（假设1em=16px） */
  /* 样式 */
}

2. 嵌套媒体查询

现代CSS预处理器（如Sass）允许嵌套媒体查询：

.element {
  color: red;
  
  @media (min-width: 768px) {
    color: blue;
  }
}

3. 检测高对比度模式

支持可访问性需求：

@media (forced-colors: active) {
  /* 高对比度模式下的样式调整 */
}

数学表达式

媒体查询中可以使用简单的数学表达式，例如计算宽高比：

$\text{aspect-ratio}=\frac{\text{width}}{\text{height}}$

/* 宽屏显示器 */
@media (min-aspect-ratio: 16/9) {
  .video-container {
    padding-bottom: 56.25%; /* 16:9 比例 */
  }
}

浏览器兼容性

媒体查询在现代浏览器中得到广泛支持，包括：

• Chrome 4+
• Firefox 3.5+
• Safari 4+
• Opera 9.5+
• Edge 12+
• iOS Safari 3.2+
• Android Browser 2.1+

对于极旧的浏览器（如IE8及以下），可以使用polyfill或提供基本的固定宽度布局作为回退方案。

最佳实践

1. 移动优先：先编写移动设备的样式，然后通过min-width逐渐增强 2. 内容优先：根据内容需要而非特定设备尺寸选择断点 3. 测试实际设备：不要仅依赖模拟器 4. 性能考虑：避免过多的媒体查询增加CSS文件大小 5. 渐进增强：确保基本功能在所有设备上可用

总结

CSS媒体查询是实现响应式设计的核心技术，它允许开发者创建能够适应各种屏幕尺寸和设备的网页。通过合理设置断点和条件样式，可以确保用户在任何设备上都能获得良好的浏览体验。掌握媒体查询是成为前端开发者的重要一步，也是现代网页设计的必备技能。