@media媒体查询，看着一篇就够了

@media 是媒体查询属性，利用这个属性，可以做很多适配工作

• 依据屏幕宽度的适配方式

@media all and (min-width: 960px) and (max-width: 1024px)

在这里插入代码片

解释
min-width: 960px: 表示视口宽度至少为 960 像素（即大于或等于 960 像素）。
max-width: 1024px: 表示视口宽度最多为 1024 像素（即小于或等于 1024 像素）。
综合这两个条件，这个媒体查询选择的是视口宽度在 960 像素到 1024 像素之间的范围，包含 960 和 1024 像素。

示例
假设我们有以下 CSS 规则：

@media all and (min-width: 960px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
}

当设备的视口宽度在 960 像素到 1024 像素之间时，页面的背景颜色将会变为浅蓝色。

• 暗黑模式适配

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }

  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }

  .night.light-scheme {
    background: #eee;
    color: black;
  }
}