css3 媒体查询详解及案例（@media）

在 CSS3 中，@media 规则用于定义不同的样式规则，以适应不同的屏幕尺寸、分辨率或设备类型。这是响应式设计的一个核心特性，它允许开发者根据用户设备的特性来定制网站或应用的外观和布局。

@media 规则基本语法如下：

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

• media-type：定义媒体类型，例如 screen（屏幕）、print（打印机）等。如果省略媒体类型，则默认为所有媒体类型。
• media-feature-rule：定义媒体特性和值的条件，例如 min-width、max-width、orientation（方向）等。

以下是一些使用 @media 规则的例子：

例子 1：根据屏幕宽度改变样式

@media screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

当屏幕宽度至少为 600 像素时，背景颜色会变为浅蓝色。

例子 2：为打印设置样式

@media print {
  body {
    color: black;
    background: white;
  }
}

当文档被打印时，文字颜色会变为黑色，背景颜色会变为白色。

例子 3：根据屏幕方向调整样式

@media screen and (orientation: landscape) {
  #sidebar {
    display: none;
  }
}

当设备处于横向模式时，侧边栏会被隐藏。

例子 4：组合多个条件

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 50%;
  }
}

当屏幕宽度在 768 像素和 1024 像素之间时，容器宽度会设置为 50%。

例子 5：使用逗号分隔的列表应用多个规则

@media screen and (max-width: 600px), screen and (orientation: portrait) {
  .column {
    width: 100%;
  }
}

当屏幕宽度最大为 600 像素或设备处于纵向模式时，列宽度会设置为 100%。

@media 规则可以嵌套在 CSS 样式表中的任意位置，并且可以包含任意数量的 CSS 规则。使用 @media 规则可以显著提升用户体验，因为它使得网站或应用能够适应不同用户的设备和环境。