CSS 媒体查询教程——标准分辨率、CSS 断点和设备尺寸

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

制作具有适应性布局的网站叫作响应式网页设计。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。但是，由于我们应用了媒体查询，当设备的最大宽度为 480 像素或更小时，它将更改为 16 像素。

重要提示：始终将媒体查询放在 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，文本类就会被应用，否则就不会。

常见的断点：是否有一个标准的分辨率

最常见的问题之一是“我应该使用哪个断点”。市场上有大量的设备，所以我们不能也不应该为每个设备定义固定的断点。

这就是为什么我们不能说对设备有一个标准的分辨率，但在日常编程中，有一些常用的断点。如果你使用的是 CSS 框架（如 Bootstrap、Bulma 等），你也可以使用它们的断点。

现在让我们来看看设备宽度的一些常用断点：

正如我在上面所说的，这些断点可能不同，也没有准确定义的标准，但这些是一些常用的断点。

响应式设计在当今的网页设计和开发领域是必须的。媒体查询是构建响应式布局的最重要的部分之一，我希望你觉得我的文章对理解媒体查询的工作有帮助。

如果你想了解更多关于网页开发的知识，请随时订阅我的频道。

谢谢你阅读本文！