CSS 媒体查询——标准分辨率，断点及目标屏幕尺寸

引言

过去，建立网站要简单得多。如今，网站的布局不仅要适应计算机，还要适应平板电脑，移动设备甚至电视。

使网站的布局适应性强被称为“响应式 Web 设计”。CSS 媒体查询是响应式设计的最重要部分之一。在本文中，我们将仔细研究媒体查询，以及如何在 CSS 中使用它们。

媒体查询是 CSS3 的一项功能，可使网页调整其布局，以适应不同的屏幕尺寸和媒体类型。

@media media type and (condition: breakpoint) {
  // CSS rules
}

我们可以在各种条件下定位不同的媒体类型。如果满足条件和/或媒体类型，则将应用媒体查询中的规则，否则将不应用。

语法一开始可能看起来很复杂，所以我们对每个部分进行详细说明......

首先使用 @media 规则定义媒体查询，然后在花括号内写 CSS 规则。 @ media 规则也用于指定目标媒体类型。

@media () {
  // CSS rules
}

在括号内，我们设置了一个条件。例如，我想为移动设备应用更大的字体。为此，我们需要设置一个最大宽度来检查设备的宽度：

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

通常，文字大小为 14px。但是，由于我们应用了媒体查询，因此，当设备的宽度小于或等于 480px 时，文字将变为 16px。

重要提示：始终将媒体查询放在 CSS 文件的末尾。

如果我们不应用媒体类型，则 @ media 规则默认选择所有类型的设备。否则，媒体类型必须紧跟在 @ media 规则之后。设备种类繁多，但我们可以将其分为 4 类：

例如，当我只想选择屏幕时，将在 @ media 规则之后设置 screen 关键字。我还必须使用“ and”关键字将规则连接起来：

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

断点可能是你会听到和使用的最常见的术语。断点是确定何时更改布局并在媒体查询中调整新规则的关键。让我们回到开头的示例：

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

在这里，断点是 480px。现在，媒体查询知道何时设置或覆盖新类。基本上，如果设备的宽度小于 480px，则将应用 text 类，否则，则不会应用 text 类。

常见断点：是否有标准分辨率？

最常见的问题之一是“我应该使用哪个断点”。市场上有大量设备，因此我们不能也不应为每个设备定义固定的断点。这就是为什么——我们不能说设备具有标准分辨率，但是在日常编程中存在一些常用断点——的原因。如果你使用的是 CSS 框架（如 Bootstrap、Bulma 等），则还可以使用它们的断点。

现在，我们看一下设备宽度的一些常见断点：

如上所述，这些断点可能会有所不同，没有确切定义的标准，但是这些是一些常用的断点。

响应式设计是当今 Web 设计和开发领域的必需品。媒体查询是构建响应式布局的最重要的部分之一。希望我的文章能帮助你理解媒体查询是怎么一回事。

如果你想了解有关 Web 开发的更多内容，欢迎订阅我的频道。

谢谢阅读！