CSS的@media规则是一种条件语句，它允许你根据不同的媒体类型和条件来应用不同的样式规则。这使得你能够根据不同的屏幕尺寸、分辨率、设备方向等条件来定制网页的布局和样式，从而创建响应式和适应性强的网站。

基本语法
@media media-type and (media-feature-and-value) {
  /* CSS 规则 */
}
  • 1.
  • 2.
  • 3.
  • media-type：可选。指定媒体类型，如screen（屏幕）、print（打印）、speech（屏幕阅读器）等。如果不指定，则默认为all，表示所有媒体类型。
  • media-feature-and-value：必须。一个或多个特性条件，用于测试媒体特征，如min-width、max-width、orientation等，以及它们的值。
示例
根据屏幕宽度调整样式
/* 当屏幕宽度小于600px时 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 当屏幕宽度大于或等于600px时 */
@media screen and (min-width: 600px) {
  body {
    background-color: lightgreen;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
根据设备方向调整样式
/* 当设备处于横向模式时 */
@media screen and (orientation: landscape) {
  body {
    margin: 0;
  }
}

/* 当设备处于纵向模式时 */
@media screen and (orientation: portrait) {
  body {
    margin: 20px;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
嵌套@media规则

@media规则可以嵌套使用，允许你根据多个条件来定义样式。

@media screen and (min-width: 600px) and (orientation: landscape) {
  body {
    font-size: 18px;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
注意事项
  • 尽可能将@media规则放在CSS文件的顶部，以确保它们被首先解析和应用。
  • 使用@media规则时，要确保你的样式表被正确加载和解析，以便在不同的媒体条件下应用相应的样式。
  • 合理使用@media规则可以显著提高网站的可用性和用户体验，但也要注意不要过度使用，以免增加CSS文件的复杂性和加载时间。