媒体查询

媒体查询是 CSS3 的一个特性，允许内容的显示根据设备的类型（如屏幕、打印机等）和一些特性（如屏幕分辨率，设备宽高等）进行适配。它常常用于实现响应式设计。

如果你要为不同屏幕大小设置不同的样式，可以这么做：

/* 对于任何屏幕都适用的样式 */
body {
  background-color: lightblue;
}

/* 当屏幕 (浏览器窗口) 宽度在 600px 以上时应用的样式 */
@media screen and (min-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

在上面的例子中，只有当媒体类型是屏幕，且浏览器窗口的宽度至少为 600px 时，才会应用 background-color: lightgreen;。其他任何情况下，背景色都为 lightblue。

你可以使用多个媒体查询，以便在各种不同情况下都可以应用不同的样式：

/* 对于任何屏幕都适用的样式 */
body {
  background-color: lightblue;
}

/* 当屏幕 (浏览器窗口) 宽度在 600px 到 900px 时应用的样式 */
@media screen and (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
  }
}

/* 当屏幕 (浏览器窗口) 宽度在 900px 以上时应用的样式 */
@media screen and (min-width: 900px) {
  body {
    background-color: lightpink;
  }
}

以上就是媒体查询的基本使用方法。其实还有更多可以使用的特性（如设备的朝向，像素比等），你可以根据需要使用。