@media 使用方法整理

在CSS中，@media规则用于创建媒体查询，这可以根据不同的屏幕和设备特性（如屏幕宽度、分辨率、设备方向等）应用不同的样式规则。

以下是一些常见的@media使用方法：

1. 响应式网页设计：

@media screen and (max-width: 599px) {
  body {
    background: blue;
  }
}
@media screen and (min-width: 600px) {
  body {
    background: red;
  }
}

2. 为打印设置特定样式：

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

3. 为移动设备设置样式：

@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

4. 使用媒体功能查询：

@media (max-width: 600px) and (orientation: landscape) {
  body {
    background: green;
  }
}

5. 使用not关键字排除某些媒体特性：

@media not print {
  body {
    background: yellow;
  }
}

6. 使用all关键字选择所有媒体类型：

@media all and (min-width: 500px) {
  body {
    background: purple;
  }
}

7. 使用媒体查询组合多个媒体类型和多个媒体特性：

@media screen, print and (orientation: landscape) {
  body {
    background: orange;
  }
}

这些是@media规则的基本用法，可以根据实际需求进行扩展和应用。