媒体查询 | 运算符 | 查询模式

什么是媒体查询 Media Queries

CSS 中的媒体查询(media query)可让你根据屏幕尺寸或设备类型等特定条件更改样式。它使用媒体类型（如屏幕或打印）和一些规则来决定何时应用样式。

媒体查询对于响应式网页设计非常重要，因为它可以让开发人员针对不同的设备尺寸和屏幕类型调整 CSS 样式。本指南将介绍媒体查询的基础知识、常见断点以及如何在 CSS 中编写媒体查询。

基本语法

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

@media <media-type> and (<expression>) {
  /* CSS styles here */
}

这里，<media-type> 是设备或介质的类型（如屏幕、打印或语音），<expression> 是应用样式时必须为真的条件。

常见的响应断点

响应式设计通常包括为不同尺寸的屏幕定义不同的布局和样式。下面是一些常见的响应式断点：

• 移动设备（最大宽度：480px）：此断点适用于智能手机等小型移动设备。
• 平板电脑（最大宽度：768px）：此断点适用于较大的移动设备，如平板电脑。
• 小型台式机（最大宽度：1024px）：此断点适用于较小的桌面屏幕。
• 大型桌面（最小宽度：1200px）：此断点适用于较大的桌面屏幕。
• 高分辨率屏幕（最小分辨率：192dpi）：此断点适用于高分辨率屏幕，如 Retina 显示屏。

有效的媒体查询

在编写媒体查询时，必须考虑以下最佳实践：

• 使用移动优先设计：从移动友好型设计开始，然后使用媒体查询为大屏幕添加样式。
• 使用相对单位：使用相对单位（如百分比或ems），而不是固定单位（如像素），以确保设计具有良好的扩展性。
• 保持简单：避免使用包含多个条件的复杂媒体查询。相反，应为每个断点使用单独的媒体查询。
• 全面测试：在不同的设备和屏幕尺寸上测试媒体查询，确保设计的外观和功能符合预期。

媒体查询示例

下面是一些常见响应式断点的媒体查询示例：

/* Mobile devices (max-width: 480px) */
@media only screen and (max-width: 480px) {
  /* CSS styles for mobile devices */
}

/* Tablets (max-width: 768px) */
@media only screen and (max-width: 768px) {
  /* CSS styles for tablets */
}

/* Small desktops (max-width: 1024px) */
@media only screen and (max-width: 1024px) {
  /* CSS styles for small desktops */
}

/* Large desktops (min-width: 1200px) */
@media only screen and (min-width: 1200px) {
  /* CSS styles for large desktops */
}

/* High-resolution screens (min-resolution: 192dpi) */
@media only screen and (min-resolution: 192dpi) {
  /* CSS styles for high-resolution screens */
}

切记根据具体设计要求调整数值和条件。

媒体查询操作符

媒体查询使用多个操作符来定义应用样式的条件。下面是一些常见的媒体查询操作符：

1. and: 用于组合多个条件。

@media only screen and (max-width: 480px) and (orientation: portrait) {
  /* CSS styles for mobile devices in portrait mode */
}

2. not: 用于否定条件。

@media not screen and (max-width: 480px) {
  /* CSS styles for devices that are not mobile devices */
}

3. only: 用于仅对指定的媒体类型应用样式。

@media only screen and (max-width: 480px) {
  /* CSS styles for screen devices only */
}

4. or: 用于使用逻辑 OR 运算符组合多个条件。

@media screen and (max-width: 480px), screen and (max-width: 768px) {
  /* CSS styles for mobile devices or tablets */
}

媒体查询功能

媒体查询还可以针对特定的设备功能，例如

1. 宽度和高度： max-width, min-width, max-height, min-height 可用于特定屏幕尺寸。

@media only screen and (max-width: 480px) {
  /* CSS styles for screens with a maximum width of 480px */
}

2. 方向：orientation：portrait or orientation: landscape可用于针对特定屏幕方向。

@media only screen and (orientation: portrait) {
  /* CSS styles for screens in portrait mode */
}

3. 长宽比：aspect-ratio可用于特定屏幕的长宽比。

@media only screen and (aspect-ratio: 16/9) {
  /* CSS styles for screens with a 16:9 aspect ratio */
}

4. 设备类型：print, screen, speech, and all 这些都可用于针对特定设备类型。

@media print {
  /* CSS styles for print devices */
}

常见媒体查询模式

1. 移动优先设计:

/* Mobile devices (max-width: 480px) */
@media only screen and (max-width: 480px) {
  /* CSS styles for mobile devices */
}

/* Tablets (min-width: 481px) and (max-width: 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  /* CSS styles for tablets */
}

/* Desktops (min-width: 769px) */
@media only screen and (min-width: 769px) {
  /* CSS styles for desktops */
}

2. 桌面优先设计:

/* Desktops (min-width: 1200px) */
@media only screen and (min-width: 1200px) {
  /* CSS styles for desktops */
}

/* Tablets (max-width: 1199px) and (min-width: 768px) */
@media only screen and (max-width: 1199px) and (min-width: 768px) {
  /* CSS styles for tablets */
}

/* Mobile devices (max-width: 767px) */
@media only screen and (max-width: 767px) {
  /* CSS styles for mobile devices */
}

通过使用这些技巧和媒体查询，你可以做出在所有设备和屏幕尺寸上都能正常运行的设计，给用户带来良好的体验。