CSS 媒体查询完整指南

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

你知道有用于反转颜色的媒体查询吗？或者用于保存数据的媒体查询？

媒体查询是现代响应式设计得以实现的关键。

借助它们，您可以根据用户的屏幕尺寸、设备功能或用户偏好等因素设置不同的样式。

但它们是如何运作的？有哪些类型的工具？你应该使用哪些工具？

我着手编写媒体查询的终极指南，涵盖每一个细节，例如有哪些媒体类型、现在应该使用的所有媒体查询、将来会使用的媒体查询以及不应该再使用的媒体查询。

以下是关于 CSS 媒体查询的完整指南

它既是一本参考指南，也是一份关于如何最佳使用这些工具的独到见解。书中还包含许多巧妙的技巧，例如只需几行代码就能打造美观网站的低成本暗黑模式：

@media (prefers-color-scheme: dark) {
  :root {
    background: #111;
    filter: invert(1) hue-rotate(180deg);
  }

  img,
  video {
    filter: invert(1) hue-rotate(180deg);
  }
}

如果你想了解它的工作原理，请前往CSS 媒体查询完整指南。