CSS 媒体查询

1. 媒体查询

1.1. 媒体查询的基本语法

CSS 媒体查询是响应式设计的重要组成部分，允许开发者根据设备特性调整网站样式。通过媒体查询，可以定义条件，当这些条件满足时，应用相应的 CSS 规则，提升网站的适应性。

基本语法示例：

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

当屏幕宽度小于或等于 600px 时，body 背景色会变为浅蓝色。

1.2. 媒体查询的类型和条件

常见的媒体类型：

• all：适用于所有设备。
• print：为打印设备设计。
• screen：为屏幕设备设计。
• speech：为语音设备设计。

常见条件：

• width：视口的宽度。
• height：视口的高度。
• orientation：设备方向，如 portrait（纵向）或 landscape（横向）。
• resolution：屏幕分辨率。

示例：

@media screen and (orientation: portrait) {
  /* 纵向设备样式 */
}

1.3. 复杂的媒体查询

可以使用逻辑运算符构建更复杂的查询：

• and：组合多个条件，所有条件为真时生效。
• not：取反条件。
• only：防止旧浏览器错误解析。

示例：

@media only screen and (min-width: 320px) and (max-width: 480px) {
  /* 样式 */
}

1.4. 结合使用媒体查询

媒体查询可在 HTML 文件中使用 <link> 标签来加载不同的样式表：

<link rel="stylesheet" href="print.css" media="print">

也可以通过 JavaScript API 检查查询状态：

var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.matches) {
  document.body.classList.add('dark-theme');
}

媒体查询能帮助创建更加灵活的网页，确保不同设备上的最佳用户体验。

2. CSS 媒体查询判断运算符

CSS 媒体查询中的运算符（and、not 和 only）可帮助精确控制样式规则的应用。

2.1. 组合使用

• and：组合多个条件，当所有条件为真时生效。

  @media (min-width: 600px) and (max-width: 900px) {
    /* 样式 */
  }
  

• not：用于否定条件。

  @media not (min-width: 600px) {
    /* 样式 */
  }
  

• only：仅适用于特定媒介类型，防止旧浏览器错误应用样式。

  @media only screen and (min-width: 600px) {
    /* 样式 */
  }
  

组合示例：

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

@media not (min-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

2.2. 注意事项

• only 运算符提高兼容性，适用于处理旧版浏览器。
• not 运算符能排除特定条件。
• and 运算符帮助定义更具体的条件组合。

通过这些运算符，媒体查询能够实现更复杂、精确的控制，以适应不同设备和环境的需求。