媒体查询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等），则还可以使用它们的断点。

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

• 320像素— 480像素：移动设备
• 481px — 768px：iPad，平板电脑
• 769px — 1024px：小屏幕，笔记本电脑
• 1025像素— 1200像素：台式机，大屏幕
• 1201px及以上—超大屏幕电视

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

包起来

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

点击阅读原文