CSS 媒体类型（Media Types）是用来为不同的设备和显示环境指定不同的样式规则。通过 @media 查询，可以为不同的设备特征（如屏幕尺寸、分辨率、方向等）应用不同的 CSS 样式，从而实现响应式设计。

1️⃣ 媒体查询的基本语法

媒体查询的语法如下：

@media 媒体类型 and (条件) {
  /* CSS 规则 */
}
  • @media 是声明媒体查询的关键字。
  • 媒体类型：指定设备类型，常见的媒体类型有 screen（屏幕）、print（打印）等。
  • 条件：通过 and 连接不同的条件，常见条件包括 width、height、orientation 等。

2️⃣ 常见的媒体类型

1. screen – 屏幕设备

用于普通的计算机屏幕、平板和手机等显示设备。

@media screen {
  /* 针对屏幕设备的样式 */
}

2. print – 打印设备

用于打印时应用的样式，通常用于调整页面的排版，使其更适合打印。

@media print {
  /* 打印设备的样式 */
  body {
    font-size: 12pt;
  }
}

3. speech – 语音设备

用于语音合成设备（如屏幕阅读器），使网站能够为视力障碍用户提供更好的体验。

@media speech {
  /* 语音设备的样式 */
}

3️⃣ 媒体特性（条件）

媒体特性用来判断设备的特征，如宽度、高度、分辨率等，常用的媒体特性有：

  • width / height：设备的宽度和高度。
  • min-width / max-width：分别为最小宽度和最大宽度，用于响应式设计。
  • min-height / max-height：分别为最小高度和最大高度。
  • orientation：设备的方向，可能值为 portrait（竖屏）和 landscape（横屏）。
  • resolution：设备的分辨率，单位通常是 dpi 或 dppx。
  • aspect-ratio：设备屏幕的宽高比。

4️⃣ 示例：媒体查询应用

1. 基于宽度的媒体查询

适用于响应式设计，通过 min-width 和 max-width 来判断屏幕的宽度。

/* 小于等于 600px 宽度的设备 */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* 大于等于 601px 宽度的设备 */
@media (min-width: 601px) {
  body {
    font-size: 16px;
  }
}

2. 适配竖屏与横屏

根据设备方向的不同，应用不同的样式。

/* 竖屏 */
@media (orientation: portrait) {
  body {
    background-color: lightblue;
  }
}

/* 横屏 */
@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

3. 基于设备分辨率的媒体查询

根据设备的屏幕分辨率（如 Retina 屏幕）应用不同的样式。

/* 仅针对分辨率为 2dppx 的设备 */
@media (min-resolution: 2dppx) {
  .logo {
    width: 100px;
    height: 100px;
  }
}

4. 多个条件组合

可以组合多个条件来精确控制样式的应用。

/* 适用于屏幕宽度大于等于 768px 且设备方向为横屏 */
@media screen and (min-width: 768px) and (orientation: landscape) {
  body {
    background-color: lightcoral;
  }
}

5️⃣ 媒体查询的综合示例

/* 基本样式 */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* 针对小屏幕设备（如手机） */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
    background-color: lightyellow;
  }
  .container {
    padding: 10px;
  }
}

/* 针对中等屏幕设备（如平板） */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 15px;
    background-color: lightblue;
  }
  .container {
    padding: 20px;
  }
}

/* 针对大屏幕设备（如桌面电脑） */
@media screen and (min-width: 1025px) {
  body {
    font-size: 16px;
    background-color: lightgreen;
  }
  .container {
    padding: 30px;
  }
}

🎯 总结

  • 媒体查询（Media Queries）通过使用不同的媒体类型和特性，可以为不同的设备（如屏幕、打印、语音设备）应用不同的样式。
  • 媒体特性（如宽度、分辨率、方向等）使得样式能够根据设备特征做出响应，从而实现响应式设计。
  • 使用媒体查询能够在不同屏幕尺寸和设备上优化网站的展示效果，提高用户体验。

通过灵活运用媒体查询，你可以创建适应多种设备的网页布局，使页面在各种设备上都能有良好的显示效果。