媒体查询 - CSS

简介

媒体查询是CSS的一种技术，用于根据设备的特性（如屏幕宽度、高度、方向等）应用不同的样式规则。通过媒体查询，我们可以根据用户使用的设备来优化网页的显示效果，从而提供更好的用户体验。

使用方法

在CSS样式表中，通过@media规则来定义媒体查询，例如：

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

在上述示例中，@media screen and (max-width: 800px)表示当屏幕宽度小于等于800像素时，应用其中的样式规则。在这个媒体查询中，我们修改了body元素的背景颜色为浅蓝色。

媒体查询可以根据需要应用于不同的媒体类型（如屏幕、打印等）和不同的设备特性。常用的设备特性包括屏幕宽度、屏幕高度、设备方向等。

媒体特性

下面是一些常用的媒体特性及其用法：

1. 屏幕宽度

通过使用min-width和max-width可以针对屏幕宽度来定义样式规则。

/* 当屏幕宽度大于等于500像素时应用的样式 */
@media screen and (min-width: 500px) {
  /* 样式规则 */
}

/* 当屏幕宽度小于等于800像素时应用的样式 */
@media screen and (max-width: 800px) {
  /* 样式规则 */
}

2. 屏幕高度

通过使用min-height和max-height可以针对屏幕高度来定义样式规则。

/* 当屏幕高度大于等于600像素时应用的样式 */
@media screen and (min-height: 600px) {
  /* 样式规则 */
}

/* 当屏幕高度小于等于900像素时应用的样式 */
@media screen and (max-height: 900px) {
  /* 样式规则 */
}

3. 设备方向

通过使用orientation可以针对设备的方向（横向或纵向）来定义样式规则。

/* 当设备为纵向时应用的样式 */
@media screen and (orientation: portrait) {
  /* 样式规则 */
}

/* 当设备为横向时应用的样式 */
@media screen and (orientation: landscape) {
  /* 样式规则 */
}

注意事项

• 使用媒体查询时，应根据目标设备的特性来选择合适的媒体特性和样式规则。
• 媒体查询的顺序很重要，样式规则将按照第一个匹配的媒体查询应用。
• 可以使用多个媒体查询来组合不同的设备特性。
• 还可以在媒体查询中嵌套其他媒体查询，以实现更复杂的样式控制。

更多关于媒体查询的详细介绍，请参考MDN Web文档。