CSS 媒体查询要点

媒体查询（Media Queries） 是在 CSS 中用来针对不同的设备和不同的屏幕尺寸应用不同的样式和布局的方法。使用媒体查询可以使网页在不同设备上获得最佳的可视效果和用户体验。

语法

媒体查询通常使用 @media 关键字加上查询条件来定义。下面是一个例子：

@media screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于 768 像素时应用的样式 */
  body {
    font-size: 14px;
  }
}

基本查询条件

以下是常见的基本查询条件：

• width: 屏幕或视口的宽度。
• height: 屏幕或视口的高度。
• orientation: 设备横向或纵向模式。
• aspect-ratio: 屏幕或视口的宽高比。
• device-aspect-ratio: 设备的宽高比。
• color: 设备颜色能力（比如 monochrome、color）。
• color-index: 设备颜色索引的数量。
• resolution: 屏幕或视口的分辨率。

媒体类型

媒体类型用于指定样式应用的设备类型。常见的媒体类型包括：

• all: 所有设备。
• screen: 电脑屏幕、平板和智能手机等。
• print: 打印机和打印预览。
• speech: 屏幕阅读器。

媒体特性修饰符

媒体特性修饰符可以增加逻辑操作符，来组合多个条件。常见的修饰符包括：

• not: 反转查询条件。
• and: 同时满足多个查询条件。
• only: 仅在指定媒体类型时应用样式。

以下是一个例子，使用媒体特性修饰符 not：

@media not screen and (color) {
  /* 当设备不支持彩色显示时应用的样式 */
  body {
    background-color: white;
  }
}

常见应用场景

媒体查询可以用于许多不同的场景，以下列举了一些常见的应用场景：

• 响应式设计: 根据不同设备尺寸和屏幕方向动态调整布局和样式。
• 为特定设备定制样式: 为特定设备或特定设备特性设置特定样式。
• 打印样式: 创建适用于打印页面的样式表，以便在打印时显示不同的排版。
• 隐藏元素: 隐藏在特定设备或屏幕尺寸下不必要显示的元素。

总结

CSS 媒体查询是一种强大的技术，可以根据设备的特性动态应用不同的样式和布局。掌握媒体查询的基本语法和常见应用场景，可以为网页提供更好的用户体验，适应不同的设备和屏幕尺寸。

希望以上内容对您有所帮助！