媒体查询

什么是媒体查询？

媒体查询（Media Queries）是CSS3的一个重要特性，它允许开发者根据不同的媒体类型和设备特性来应用不同的CSS样式。媒体查询是响应式设计的核心技术之一，它使得网页能够根据设备的屏幕尺寸、分辨率、方向等条件自动调整布局和样式。

媒体查询的语法

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

css

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

媒体类型

媒体类型指定了样式适用的设备类型，常用的媒体类型包括：

媒体类型	描述
`all`	所有设备（默认值）
`screen`	彩色屏幕设备
`print`	打印预览和打印设备
`speech`	屏幕阅读器等语音合成设备
`handheld`	手持设备（已废弃，建议使用`screen`）
`projection`	投影设备（已废弃，建议使用`screen`）

媒体特性

媒体特性指定了样式适用的设备特性，常用的媒体特性包括：

媒体特性	描述	示例
`width`	视口宽度	`(max-width: 768px)`
`height`	视口高度	`(min-height: 600px)`
`device-width`	设备屏幕宽度	`(device-width: 320px)`
`device-height`	设备屏幕高度	`(device-height: 568px)`
`orientation`	设备方向	`(orientation: portrait)` 或 `(orientation: landscape)`
`aspect-ratio`	视口宽高比	`(aspect-ratio: 16/9)`
`device-aspect-ratio`	设备屏幕宽高比	`(device-aspect-ratio: 4/3)`
`resolution`	设备分辨率	`(min-resolution: 300dpi)`
`color`	颜色深度	`(color: 8)`
`hover`	是否支持悬停	`(hover: hover)`
`pointer`	主输入设备类型	`(pointer: fine)` 或 `(pointer: coarse)`

逻辑操作符

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

操作符	描述
`and`	逻辑与，同时满足多个条件
`not`	逻辑非，排除满足条件的设备
`only`	仅在特定设备上应用样式，用于兼容旧浏览器
`,`	逻辑或，满足任一条件即可

媒体查询的用法

1. 基本用法

css

/* 当屏幕宽度小于768px时应用样式 */
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

2. 组合多个条件

css

/* 当屏幕宽度在768px到1024px之间，且为横向时应用样式 */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .container {
    width: 90%;
  }
}

3. 使用逻辑或

css

/* 当屏幕宽度小于768px或大于1200px时应用样式 */
@media screen and (max-width: 767px), screen and (min-width: 1201px) {
  .sidebar {
    display: none;
  }
}

4. 使用not操作符

css

/* 除了打印设备外的所有设备都应用样式 */
@media not print {
  body {
    background-color: #f0f0f0;
  }
}

5. 使用only操作符

css

/* 仅在屏幕宽度小于768px的设备上应用样式（兼容旧浏览器） */
@media only screen and (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

媒体查询的位置

媒体查询可以放在CSS文件的任何位置，但通常有两种常见的组织方式：

1. 内联媒体查询

将媒体查询直接放在相关样式之后：

css

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

2. 集中式媒体查询

将所有媒体查询集中放在CSS文件的末尾：

css

/* 基础样式 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 所有响应式样式集中在文件末尾 */
@media screen and (max-width: 1200px) {
  /* 大屏幕样式 */
}

@media screen and (max-width: 992px) {
  /* 中等屏幕样式 */
}

@media screen and (max-width: 768px) {
  /* 小屏幕样式 */
}

@media screen and (max-width: 576px) {
  /* 超小屏幕样式 */
}

常用断点

断点是指触发媒体查询的屏幕宽度阈值。虽然没有固定的标准，但以下是一些常用的断点：

断点	设备类型
`max-width: 576px`	手机设备
`min-width: 577px` and `max-width: 768px`	平板设备
`min-width: 769px` and `max-width: 992px`	小型桌面设备
`min-width: 993px` and `max-width: 1200px`	中型桌面设备
`min-width: 1201px`	大型桌面设备

媒体查询的最佳实践

移动优先：从移动设备的样式开始，然后逐步为更大的屏幕添加样式
合理使用断点：不要使用过多的断点，只在必要时添加
使用相对单位：在媒体查询中使用相对单位（如rem、em）而不是绝对单位（如px）
测试多种设备：在不同设备上测试媒体查询的效果
避免过度设计：保持响应式设计简洁，避免过度复杂的布局调整

媒体查询的局限性

性能影响：过多的媒体查询可能会影响页面加载性能
设备多样性：随着设备类型的增加，很难覆盖所有可能的屏幕尺寸
维护难度：复杂的媒体查询可能会增加CSS的维护难度

总结

媒体查询是响应式设计的核心技术，它允许开发者根据不同的设备特性应用不同的CSS样式。通过合理使用媒体查询，可以创建出在各种设备上都能良好显示的响应式网页。