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

css媒体查询分辨率

In the past, building a website was much simpler. Today a website’s layout should adapt itself not only to computers, but also tablets, mobile devices, and even TVs.

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

Making a website with an adaptable layout is called Responsive Web Design. And CSS Media Queries are one of the most important parts of Responsive Design. In this article, we are going to take a closer look at Media Queries and how to use them in CSS.

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

If you prefer, you can watch the video version below:

如果愿意，您可以观看以下视频版本：

什么是媒体查询？ (What is a Media Query?)

A Media query is a CSS3 feature that makes a webpage adapt its layout to different screen sizes and media types.

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

句法 (Syntax)

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

We can target different media types under a variety of conditions. If the condition and/or media types meet, then the rules inside the media query will be applied, otherwise, they won’t.

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

The syntax may seem complicated at the beginning, so let’s explain each part one by one in detail…

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

@媒体规则 (@ Media Rule)

We start defining media queries with @media rule and later include CSS rules inside the curly braces. The @ media rule is also used to specify target media types.

我们开始使用@media规则定义媒体查询，然后在花括号内包括CSS规则。 @ media规则也用于指定目标媒体类型。

@media () {
  // CSS rules
}

插入语 (Parenthesis)

Inside the parenthesis, we set a condition. For example, I want to apply a larger font size for mobile devices. To do that, we need to set a maximum width which checks the width of a device:

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

.text {
  font-size: 14px;
}

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

Normally, the text size will be 14px. However since we applied a media query, it will change to 16px when a device has a maximum width of 480px or less.

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

Important: Always put your media queries at the end of your CSS file.

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

媒体类型 (Media Types)

If we don’t apply a media type, the @ media rule selects all types of devices by default. Otherwise, Media types come right after the @ media rule. There are many kinds of devices but we can group them into 4 categories:

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

• all — for all media types
  全部-适用于所有媒体类型
• print — for printers
  打印—用于打印机
• screen — for computer screens, tablets and, smart-phones
  屏幕—用于计算机屏幕，平板电脑和智能手机
• speech — for screen readers that “read” the page out loud
  语音-适用于大声“阅读”页面的屏幕阅读器

For example, when I want to select only screens, I will set the screen keyword right after the @ media rule. I also must concatenate the rules with the “and” keyword:

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

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

断点 (Breakpoints)

Breakpoints are maybe the most common term you will hear and use. A breakpoint is a key to determine when to change the layout and adapt the new rules inside the media queries. Let’s go back to our example at the beginning:

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

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

Here, the breakpoint is 480px. Now the media query knows when to set or overwrite the new class. Basically, if the width of a device is smaller than 480px, the text class will be applied, otherwise, it won’t.

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

常见断点：是否有标准分辨率？ (Common Breakpoints: Is there a Standard Resolution?)

One of the most commonly asked questions is “Which breakpoint should I use?”. There are a ton of devices on the market so we can’t and we shouldn’t define fixed breakpoints for each of them.

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

That’s why we can’t say that there is a standard resolution for devices, but there are some commonly used breakpoints in daily programming. If you’re using a CSS framework (like Bootstrap, Bulma, etc.) you can also use their breakpoints.

这就是为什么我们不能说设备有标准分辨率的原因，但是日常编程中有一些常用的断点。 如果您使用的是CSS框架(如Bootstrap，Bulma等)，则还可以使用它们的断点。

Now let’s see some common breakpoints for widths of devices:

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

• 320px — 480px: Mobile devices
  320像素— 480像素：移动设备
• 481px — 768px: iPads, Tablets
  481px — 768px：iPad，平板电脑
• 769px — 1024px: Small screens, laptops
  769px — 1024px：小屏幕，笔记本电脑
• 1025px — 1200px: Desktops, large screens
  1025像素-1200像素：台式机，大屏幕
• 1201px and more —  Extra large screens, TV
  1201px及以上—超大屏幕电视

As I said above, these breakpoints can differ and there is no standard exactly defined, but these are some commonly used ones.

就像我在上面说的那样，这些断点可以不同，也没有确切定义的标准，但是这些是一些常用的断点。

结语 (Wrapping up)

Responsive Design is a must in today’s web design and development field. Media queries are one of the most important parts of building responsive layouts, and I hope you find my post helpful for understanding how media queries work.

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

If you want to learn more about web development, feel free to subscribe to my channel.

如果您想了解有关Web开发的更多信息，请随时订阅我的频道。

Thank you for reading!

感谢您的阅读！

翻译自: https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/

css媒体查询分辨率