3.4 媒体查询与响应式设计

1. 什么是媒体查询？

媒体查询（Media Queries） 是 CSS 中一种强大的功能，它允许根据不同的设备特性（如屏幕宽度、分辨率、设备方向等）来应用不同的样式。媒体查询使得响应式设计成为可能，能够使网页在各种设备上都能提供良好的用户体验。

媒体查询是通过 @media 规则来定义的。它可以用于检测设备的特性并基于这些特性应用不同的 CSS 样式。

2. 媒体查询的基本语法

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

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

media-type：媒体类型（例如 screen、print 等）。
condition：是特定的条件，例如设备宽度、设备方向等。

常见的媒体类型包括：

screen：用于计算机、手机、平板等屏幕设备。
print：用于打印页面。
all：适用于所有设备。

示例 1：根据屏幕宽度应用不同的样式

@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

在这个例子中，当屏幕的宽度小于或等于 768px 时，body 的背景颜色将变为浅蓝色。

示例 2：根据屏幕方向（纵向或横向）设置样式

@media screen and (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

此代码当设备处于横屏模式时，body 背景颜色会变为浅绿色。

3. 常见的媒体查询条件

max-width 和 min-width：用于设置屏幕宽度的上限和下限。常用于响应式设计中，以便适应不同设备的屏幕大小。
```
@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}
```
这段代码将在屏幕宽度小于或等于 600px 时，将 .container 的布局方向从水平变为垂直。
max-height 和 min-height：用于设置屏幕高度的上限和下限。
```
@media screen and (min-height: 400px) {
  .header {
    padding: 20px;
  }
}
```
这段代码会在屏幕高度大于等于 400px 时，增加 .header 元素的内边距。
orientation：用于根据设备的方向选择样式，常用于区分横屏和竖屏模式。
```
@media screen and (orientation: portrait) {
  .container {
    background-color: lightgray;
  }
}
```
在竖屏模式下，.container 背景颜色将变为浅灰色。
resolution：用于设置屏幕分辨率。例如，针对高分辨率显示屏（如 Retina 屏幕）设置不同的样式。
```
@media screen and (min-resolution: 192dpi) {
  .logo {
    width: 200px;
  }
}
```
当设备的分辨率大于或等于 192dpi 时，.logo 的宽度将被设置为 200px。

4. 媒体查询的组合与逻辑运算符

你可以将多个条件组合在一起，使用 and、not 和 only 等逻辑运算符。

and：多个条件同时满足时，应用样式。
```
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .sidebar {
    display: block;
  }
}
```
当屏幕宽度在 600px 和 1024px 之间时，.sidebar 将显示为块级元素。

not：排除某个条件。

@media not all and (max-width: 480px) {
  /* 不适用于最大宽度小于 480px 的屏幕 */
}

only：只适用于某种特定条件（通常用于去除某些旧版浏览器的影响）。
```
@media only screen and (max-width: 600px) {
  .nav {
    display: none;
  }
}
```

5. 响应式设计（Responsive Design）

响应式设计是指设计一种能够根据不同设备的屏幕尺寸和分辨率自动调整布局和样式的网页。使用媒体查询是响应式设计的核心，它使得网页能够适应桌面、平板、手机等各种设备，提供更好的用户体验。

示例 1：响应式布局

/* 默认样式（适用于大屏设备） */
.container {
  display: flex;
  flex-direction: row;
}

/* 屏幕宽度小于 768px 时改变布局 */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

在这个例子中，当屏幕宽度小于 768px 时，.container 的布局会从横向排列变为纵向排列。这是一种常见的响应式设计模式。

示例 2：响应式字体大小

body {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

在这个例子中，字体大小会根据屏幕宽度自动调整。当屏幕宽度小于 768px 时，字体大小变为 14px；当宽度小于 480px 时，字体大小变为 12px。

6. 使用 `@media` 的最佳实践

移动优先：采用“移动优先”的设计理念，首先为小屏设备（如手机）编写样式，然后通过媒体查询针对大屏设备（如平板和桌面）做调整。
```
/* 移动优先样式 */
body {
  font-size: 14px;
}

/* 针对较大屏幕设备调整 */
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
```
合理使用媒体查询：不要在每个样式中都使用媒体查询，避免冗余。在设计时，建议根据布局的重大变化来设置媒体查询，比如从单列布局切换到多列布局等。
测试与优化：确保测试网页在不同的设备和屏幕尺寸下的效果，确保布局不会发生错乱。同时，避免过多的媒体查询，使样式表过于复杂和冗长。

7. 结论

媒体查询是响应式设计的核心技术，它使得网页能够根据不同设备的特性动态调整布局和样式，确保用户在各种设备上都能获得良好的浏览体验。通过合理使用媒体查询，可以优化网页的显示效果，提供跨设备的无缝体验。

#前端开发分享于 2025-03-11

上一篇：3.3 伪类与伪元素下一篇：4.1 Web 字体与图标字体

3.4 媒体查询与响应式设计