CSS 的@media规则，响应式的一种解决方案

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

基本语法

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

• 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;
  }
}

根据设备方向调整样式

/* 当设备处于横向模式时 */
@media screen and (orientation: landscape) {
  body {
    margin: 0;
  }
}

/* 当设备处于纵向模式时 */
@media screen and (orientation: portrait) {
  body {
    margin: 20px;
  }
}

嵌套@media规则

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

@media screen and (min-width: 600px) and (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

注意事项

• 尽可能将@media规则放在CSS文件的顶部，以确保它们被首先解析和应用。
• 使用@media规则时，要确保你的样式表被正确加载和解析，以便在不同的媒体条件下应用相应的样式。
• 合理使用@media规则可以显著提高网站的可用性和用户体验，但也要注意不要过度使用，以免增加CSS文件的复杂性和加载时间。