媒体查询CSS教程–标准分辨率，CSS断点和目标电话大小

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

使网站的布局适应性强称为响应式Web设计。CSS Media Queries是响应式设计的最重要部分之一。在本文中，我们将仔细研究Media Queries以及如何在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;
  }
}

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

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

如果我们不应用媒体类型，则@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等），则还可以使用它们的断点。

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

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

响应式设计是当今Web设计和开发领域中必不可少的。媒体查询是构建响应式布局的最重要部分之一，我希望您发现我的帖子对理解媒体查询的工作方式有所帮助。

本文来自投稿，不代表微擎百科立场，如若转载，请注明出处：https://www.w7.wiki/develop/4250.html