CSS3 多媒体查询 (Media Queries)

CSS3 多媒体查询是一个强大的功能，允许网页根据不同的设备特征（如屏幕尺寸、分辨率、方向等）应用不同的样式。它主要用于响应式网页设计，确保网站在各种设备（如桌面、平板、手机）上都能提供良好的用户体验。

1️⃣ 基础语法

@media media-type and (condition) {
  /* 样式规则 */
}
  • @media 是媒体查询的关键字，用于指定适用的条件。
  • media-type 表示媒体类型（如屏幕、打印机等），通常使用 screen 或 all。
  • (condition) 是条件部分，用来定义特定的设备特征或属性。

示例：

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

这段代码表示：

  • 当设备屏幕宽度小于等于 600px 时，页面背景颜色变为 lightblue。

2️⃣ 媒体查询的常见类型

1. 屏幕类型（screen）

用于指定在屏幕上查看时应用的样式。

@media screen {
  /* 样式规则 */
}

2. 打印类型（print）

用于指定在打印时应用的样式。适用于打印预览或打印时。

@media print {
  /* 打印样式规则 */
}

3. 语音类型（speech）

用于语音设备时应用的样式。

@media speech {
  /* 样式规则 */
}

4. 视窗类型（all）

适用于所有设备类型，通常用于通用的样式。

@media all {
  /* 通用样式规则 */
}

3️⃣ 常用条件

1. max-width / min-width

这两个条件用于根据设备的屏幕宽度来设置不同的样式。

  • max-width: 如果视口宽度小于等于指定值，样式会生效。
  • min-width: 如果视口宽度大于等于指定值，样式会生效。
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}


@media (min-width: 768px) {
  .container {
    width: 80%;
  }
}

2. max-height / min-height

这两个条件用于根据设备的高度来设置不同的样式。

@media (max-height: 600px) {
  .header {
    font-size: 14px;
  }
}

3. orientation

orientation 用于检测设备的方向，可以是 portrait（竖屏）或 landscape（横屏）。

@media (orientation: portrait) {
  body {
    background-color: lightgreen;
  }
}


@media (orientation: landscape) {
  body {
    background-color: lightcoral;
  }
}

4. aspect-ratio

aspect-ratio 用于检测屏幕的宽高比，允许你根据设备的显示比例设置样式。

@media (aspect-ratio: 16/9) {
  /* 针对 16:9 屏幕的样式 */
}

5. resolution

resolution 用于指定设备的分辨率，常用于高分辨率屏幕（如 Retina 屏幕）。

@media (min-resolution: 192dpi) {
  /* 针对高分辨率屏幕的样式 */
}

4️⃣ 组合多个条件

你可以使用 and 来组合多个条件，或使用 , 来应用多个媒体查询。

@media screen and (max-width: 768px) and (orientation: portrait) {
  /* 在竖屏且宽度小于等于 768px 时应用 */
  .sidebar {
    display: none;
  }
}

你也可以使用逗号 , 来应用多个条件，表示逻辑“或”的关系。

@media screen and (max-width: 600px), (max-width: 400px) {
  /* 在宽度小于等于 600px 或 400px 时都应用 */
  .header {
    font-size: 14px;
  }
}

5️⃣ 响应式设计的实例

HTML 结构：

<div class="container">
  <div class="header">Responsive Header</div>
  <div class="content">Responsive Content</div>
</div>

CSS：

/* 基础样式 */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.header {
  background-color: lightblue;
  font-size: 24px;
  text-align: center;
}

.content {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
}

/* 当屏幕宽度小于等于 768px 时 */
@media (max-width: 768px) {
  .header {
    font-size: 18px;
    background-color: lightcoral;
  }

  .content {
    font-size: 16px;
    background-color: lightyellow;
  }
}

/* 当屏幕宽度小于等于 480px 时 */
@media (max-width: 480px) {
  .header {
    font-size: 14px;
    background-color: lightgreen;
  }

  .content {
    font-size: 14px;
    background-color: lightpink;
  }
}

效果说明：

  • 在大屏幕设备上（宽度 > 768px），.header 和 .content 使用较大的字体和默认的背景色。
  • 在平板设备上（宽度 ≤ 768px），.header 和 .content 的字体变小，背景色也发生变化。
  • 在手机设备上（宽度 ≤ 480px），.header 和 .content 的字体和背景色进一步调整，以适应小屏幕。

6️⃣ 媒体查询简写

如果你希望为不同的设备类型设置不同的样式，也可以使用简写形式。

/* 针对屏幕宽度大于等于 768px */
@media (min-width: 768px) {
  /* 样式规则 */
}

/* 针对屏幕宽度小于 768px */
@media (max-width: 768px) {
  /* 样式规则 */
}

总结

CSS3 多媒体查询是响应式设计的关键，允许网页根据不同的设备条件调整样式。通过使用 @media，你可以根据设备的屏幕宽度、分辨率、方向、布局等特性来精确控制页面的显示效果。这使得页面能够更好地适应各种设备，从桌面到移动设备都能提供良好的用户体验。