css响应式媒体查询_CSS媒体查询和响应式设计

css响应式媒体查询

In this post I’m going to first introduce media types and media feature descriptors, then I’ll explain media queries.

在这篇文章中，我将首先介绍媒体类型和媒体功能描述符，然后我将解释媒体查询。

媒体类型 (Media types)

Used in media queries and @import declarations, media types allow us to determine on which media a CSS file, or a piece of CSS, is loaded.

媒体类型用于媒体查询和@import声明中，使我们能够确定将CSS文件或一段CSS加载到哪种媒体上。

We have the following media types

我们有以下媒体类型

• all means all the media

  all意味着所有媒体

• print used when printing

  print使用的打印

• screen used when the page is presented on a screen

  screen页面时使用的屏幕

• speech used for screen readers

  屏幕阅读器使用的speech

screen is the default.

screen是默认设置。

In the past we had more of them, but most are deprecated as they proven to not be an effective way of determining device needs.

过去，我们有更多此类设备，但由于已被证明不是确定设备需求的有效方法，因此大多数设备已弃用。

We can use them in @import statements like this:

我们可以在@import语句中使用它们，如下所示：

@import url(myfile.css) screen;
@import url(myfile-print.css) print;

We can load a CSS file on multiple media types separating each with a comma:

我们可以在多个用逗号分隔的媒体类型上加载CSS文件：

@import url(myfile.css) screen, print;

The same works for the link tag in HTML:

HTML中的link标记也是如此：

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen" />
<link rel="stylesheet" type="text/css" href="another.css" media="screen, print" />

We’re not limited to just using media types in the media attribute and in the @import declaration. There’s more

我们不仅限于在media属性和@import声明中使用媒体类型。 还有更多

媒体功能描述符 (Media feature descriptors)

First, let’s introduce media feature descriptors. They are additional keywords that we can add to the media attribute of link or to the @import declaration, to express more conditionals over the loading of the CSS.

首先，让我们介绍媒体功能描述符 。 它们是我们可以添加到link的media属性或@import声明中的其他关键字，以表示有关CSS加载的更多条件。

Here’s the list of them:

以下是它们的列表：

• width

  width

• height

  height

• device-width

  device-width

• device-height

  device-height

• aspect-ratio

  aspect-ratio

• device-aspect-ratio

  device-aspect-ratio

• color

  color

• color-index

  color-index

• monochrome

  monochrome

• resolution

  resolution

• orientation

  orientation

• scan

  scan

• grid

  grid

Each of them have a corresponding min-* and max-*, for example:

它们每个都有对应的min- *和max- *，例如：

• min-width, max-width

  min-width ， max-width

• min-device-width, max-device-width

  min-device-width ， max-device-width

and so on.

等等。

Some of those accept a length value which can be expressed in px or rem or any length value. It’s the case of width, height, device-width, device-height.

其中一些接受长度值，可以用px或rem表示，也可以是任何长度值。 是width ， height ， device-width ， device-height 。

For example:

例如：

@import url(myfile.css) screen and (max-width: 800px);

Notice that we wrap each block using media feature descriptors in parentheses.

请注意，我们在括号中使用媒体特征描述符包装了每个块。

Some accept a fixed value. orientation, used to detect the device orientation, accepts portrait or landscape.

有些接受固定值。 orientation ，用于检测设备的方向，接受portrait或landscape 。

Example:

例：

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />

scan, used to determine the type of screen, accepts progressive (for modern displays) or interlace (for older CRT devices)

scan (用于确定屏幕类型)接受progressive (对于现代显示器)或interlace (对于较旧的CRT设备)

Some others want an integer.

其他一些想要整数。

Like color which inspects the number of bits per color component used by the device. Very low-level, but you just need to know it’s there for your usage (like grid, color-index, monochrome).

类似于color ，它检查设备使用的每个颜色分量的位数。 级别很低，但是您只需要知道它的使用位置即可(例如grid ， color-index ， monochrome )。

aspect-ratio and device-aspect-ratio accept a ratio value representing the width to height viewport ratio, which is expressed as a fraction.

aspect-ratio和device-aspect-ratio接受表示宽度与高度视口比率的比率值，该比率值表示为分数。

Example:

例：

@import url(myfile.css) screen and (aspect-ratio: 4/3);

resolution represents the pixel density of the device, expressed in a resolution data type like dpi.

resolution表示设备的像素密度，以分辨率数据类型(如dpi 。

Example:

例：

@import url(myfile.css) screen and (min-resolution: 100dpi);

逻辑运算符 (Logic operators)

We can combine rules using and:

我们可以使用and组合规则：

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />

We can perform an “or” type of logic operation using commas, which combines multiple media queries:

我们可以使用逗号执行“或”类型的逻辑运算，该运算结合了多个媒体查询：

@import url(myfile.css) screen, print;

We can use not to negate a media query:

我们可以使用not否定媒体查询：

@import url(myfile.css) not screen;

Important: not can only be used to negate an entire media query, so it must be placed at the beginning of it (or after a comma)

重要提示： not只能用来否定整个媒体查询，所以它必须被放置在它的开始(或逗号之后)

媒体查询 (Media queries)

All those above rules we saw applied to @import or to the link HTML tag can be applied inside the CSS, too.

我们在@import或link HTML标签上看到的所有上述规则也可以在CSS内应用。

You need to wrap them in a @media () {} structure.

您需要将它们包装在@media () {}结构中。

Example:

例：

@media screen and (max-width: 800px) {
  /* enter some CSS */
}

and this is the foundation for responsive design.

这是响应式设计的基础。

Media queries can be quite complex. This example applies the CSS only if it’s a screen device, the width is between 600 and 800 pixels, and the orientation is landscape:

媒体查询可能非常复杂。 本示例仅在屏幕设备，宽度在600到800像素之间且方向为横向的情况下才应用CSS：

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
}

翻译自: https://flaviocopes.com/css-media-queries/

css响应式媒体查询