CSS3 多媒体查询

什么是多媒体查询？

多媒体查询是 CSS3 的一个特性，它可以让你根据不同的媒体类型和设备特征来应用不同的样式规则。例如，你可以针对屏幕、打印机、语音等媒体类型，或者针对视口宽度、高度、方向、分辨率等媒体特征来定制你的网页或应用程序的外观和布局。²

多媒体查询的语法如下：

@media not|only mediatype and (expressions) {
  /* CSS 代码... */
}

其中，not 和 only 是可选的逻辑运算符，用于否定或限定整个查询。mediatype 是指定的媒体类型，如 screen 或 print。expressions 是指定的一个或多个媒体特征，如 width 或 color，可以使用 min- 或 max- 前缀来表示范围。³

为什么要使用多媒体查询？

多媒体查询的主要目的是实现响应式 Web 设计，也就是让你的网页或应用程序能够适应不同大小和形状的屏幕，以及不同的输入方式和环境条件。这样可以提高用户体验和可访问性，以及节省开发成本和维护时间。¹

例如，你可以使用多媒体查询来实现以下效果：

• 在宽屏显示器上显示三列布局，在窄屏显示器上显示两列布局，在手机上显示单列布局。
• 在打印机上隐藏不必要的元素，调整字体大小和颜色，优化页面边距和分页。
• 在支持悬停操作的设备上显示下拉菜单，在不支持悬停操作的设备上显示点击菜单。
• 在弱光条件下使用暗色主题，在明亮条件下使用亮色主题。
• 在高分辨率设备上使用高清图片，在低分辨率设备上使用普通图片。

如何使用多媒体查询？

要使用多媒体查询，你有以下几种方法：

• 在 CSS 文件中使用 @media 规则来定义多媒体查询，并在其中编写相应的样式规则。
• 在 HTML 文件中使用 <link> 或 <style> 标签的 media 属性来引用或内嵌带有多媒体查询的样式文件或代码。
• 在 HTML 文件中使用 <source> 标签的 media 属性来指定不同的图片或视频源文件。
• 在 JavaScript 文件中使用 window.matchMedia() 方法和 MediaQueryList 对象来测试和监控多媒体状态。

以下是一些简单的示例：

示例一：根据视口宽度改变背景颜色

/* 默认情况下，背景颜色为白色 */
body {
  background-color: white;
}

/* 当视口宽度小于等于 480px 时，背景颜色为浅绿色 */
@media screen and (max-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

示例二：根据视口宽度改变布局

/* 默认情况下，左侧栏占据 25% 的宽度，主内容占据 75% 的宽度 */
#leftsidebar {
  width: 25%;
}

#main {
  width: 75%;
}

/* 当视口宽度小于等于 600px 时，左侧栏和主内容都占据 100% 的宽度 */
@media screen and (max-width: 600px) {
  #leftsidebar,
  #main {
    width: 100%;
  }
}

示例三：根据设备方向改变字体大小

/* 默认情况下，字体大小为 16px */
p {
  font-size: 16px;
}

/* 当设备为横向模式时，字体大小为 20px */
@media screen and (orientation: landscape) {
  p {
    font-size: 20px;
  }
}

总结

CSS3 多媒体查询是一种强大而灵活的工具，可以让你根据不同的媒体类型和设备特征来应用不同的样式规则。它是响应式 Web 设计的关键部分，可以提高用户体验和可访问性。要使用多媒体查询，你需要了解其语法、逻辑运算符、媒体类型和媒体特征，并且可以通过不同的方法在 CSS、HTML 和 JavaScript 中实现它们。

参考资料：

¹: 使用媒体查询 - CSS：层叠样式表 | MDN

²: CSS3 多媒体查询 | 菜鸟教程

³: 媒体查询入门指南 - 学习 Web 开发 | MDN