AtoZ CSS屏幕录像：媒体查询

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series.

该截屏视频是我们的AtoZ CSS系列的一部分。

成绩单 (Transcript)

The @media rule allows conditional styling of elements.

@media规则允许元素的条件样式。

The conditions can be based on the type of media or known characteristics of the device being used.

条件可以基于介质的类型或所使用设备的已知特性。

Combining media queries with fluid layout and flexible images, allows us to implement responsive web design.

将媒体查询与流畅的布局和灵活的图像相结合，使我们能够实施响应式网页设计。

In this episode we’ll look at how @media queries can be used to change the styling of websites based on querying information about the device and two approaches for tackling page layout in responsive design.

在本集中，我们将研究如何使用@media查询基于有关设备的查询信息以及两种用于响应式设计的解决页面布局的方法来更改网站的样式。

媒体查询 (Media Queries)

Sometimes we only want certain styles to apply to certain types of devices or when certain characteristics of the device are true.

有时，我们只希望某些样式应用于某些类型的设备，或者当某些设备的特性为真时。

For example, we might want to remove the header and footer when printing a web page.

例如，我们可能要在打印网页时删除页眉和页脚。

Using the query print will restrict the styles of the at-rule to the print media type.

使用查询print将规则的样式限制为print介质类型。

@media print {
  .site-header, .site-footer {display: none;}
}

Other media types include

其他媒体类型包括

• all

  all

• braille

  braille

• embossed

  embossed

• handheld

  handheld

• projection

  projection

• screen

  screen

• speech

  speech

• tty

  tty

• tv

  tv

The only two media types I use are print and screen, which is a bit of a catch-all for any screen-based device including mobile devices, tv and projection.

我使用的仅有的两种媒体类型是print和screen ，对于任何基于屏幕的设备(包括移动设备，电视和投影设备)来说，这都是万能的。

设备查询 (Device Queries)

We can check more fine-grained details about the device being used by passing a query into the @media rule. A common property to query is the min-width of the browser window

通过将查询传递给@media规则，我们可以检查有关所使用设备的更多详细信息。 要查询的常见属性是浏览器窗口的min-width

body {
  font-size: 0.75em;
}
@media (min-width: 600px) {
  body {
    font-size: 1em;
  }
}

In this example the initial font-size for all devices is 0.75em but if the device has a minimum width of 600px (ie. is 600px or wider) then the font size will be increased to 1em.

在此示例中，所有设备的初始font-size为0.75em但是如果设备的最小宽度为600px (即600px或更宽)，则font size将增加为1em 。

There are a number of things we can query about the device:

我们可以查询有关设备的许多信息：

• width min-width max-width

  width min-width max-width

• height min-height max-height

  height min-height max-height

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

  device-width min-device-width max-device-width

• device-height min-device-height max-device-height orientation

  device-height min-device-height max-device-height orientation

• aspect-ratio min-aspect-ratio max-aspect-ratio

  aspect-ratio min-aspect-ratio max-aspect-ratio

• device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio

  device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio

• resolution min-resolution max-resolution

  resolution min-resolution max-resolution

• color min-color max-color

  color min-color max-color

• color-index min-color-index max-color-index

  color-index min-color-index max-color-index

• monochrome min-monochrome max-monochrome

  monochrome min-monochrome max-monochrome

• scan grid

  scan grid

Many of these have a corresponding min and max variety as well.

其中许多都有相应的min和max变化。

I use min-width and max-width a lot, orientation, aspect-ratio and resolution occasionally and min-height and max height from time to time. I’ve never used the others as far as I can remember.

我经常使用min-width和max-width ， orientation ， aspect-ratio和resolution ，以及不时使用min-height和max height 。 据我所知，我从未使用过其他产品。

Width is by far the most common thing to query about the device, but as the reported width and device width are often different, it’s necessary to add the following meta tag to your HTML which will make them equivalent:

宽度是迄今为止最常见的关于设备的查询，但是由于报告的宽度和设备宽度通常不同，因此有必要在HTML中添加以下meta标记，以使其等效：

<meta name="viewport" content="width=device-width, initial-scale=1">

The initial-scale is set to prevent devices zooming out to fit the whole site in the viewport. It’s possible to set maximum-scale=1 but then this removes the ability for a user to zoom the page in which isn’t good user experience.

设置initial-scale是为了防止设备缩小以适合视口中的整个站点。 可以将maximum-scale=1设置maximum-scale=1但是这样一来，用户就无法缩放用户体验不佳的页面。

组合查询 (Combined Queries)

It’s possible to combine queries together using the and keyword:

可以使用and关键字将查询组合在一起：

@media screen and (min-width: 600px) and (max-width: 800px) { }
@media screen and (orientation: portrait) and (min-width: 800px) { }

It’s also possible to use negation:

也可以使用否定：

@media not screen { }

And limit applicability using only:

并限制使用的适用性only ：

@media only screen { }

These @media blocks can contain any CSS you’d write elsewhere in the stylesheet and cascade the same way too. This means you will likely not have to write that much CSS to change the design for multiple devices.

这些@media块可以包含您要在样式表中其他位置编写的任何CSS，并且也可以通过相同的方式级联。 这意味着您可能不必编写太多CSS即可更改多个设备的设计。

响应式设计 (Responsive Design)

As @media queries allow the conditional styling when certain device characteristics are true, we can use them to control the styling of a page across a range of different devices or device sizes.

由于@media查询在某些设备特征为真时允许条件样式，因此我们可以使用它们来控制不同设备或设备大小范围内页面的样式。

We can control fine details or big-picture layout. It’s common for websites viewed on a large screen to have multiple columns of text and images, but this would be impossible to read on a screen one fifth of the width.

我们可以控制精细的细节或大图的布局。 在大屏幕上查看的网站通常会显示多列文字和图片，但这在屏幕上看不到宽度的五分之一是不可能的。

As building and modifying complex layouts is time-consuming, let’s use a simple example of four boxes to represent four sections of a page. Each box contains an image and a few lines of text.

由于构建和修改复杂的布局非常耗时，因此，我们使用一个简单的示例，用四个框代表页面的四个部分。 每个框包含一张图像和几行文本。

Without any styles applied, the images, text, and boxes stack on top of each other. We can space them out a bit and add some borders and backgrounds to make them stand out a bit more.

如果不应用任何样式，则图像，文本和框会彼此堆叠。 我们可以将它们隔开一些距离，并添加一些边框和背景，使它们更加突出。

As the screen gets wider, the layout looks a bit stretched and the small amount of text starts looking odd compared to the size of the image. Around 500px, we could add a @media query to create a two column layout instead of a 1-column layout.

随着屏幕变宽，布局看起来有些拉伸，并且与图像大小相比，少量文本开始显得奇怪。 大约500像素时，我们可以添加@media查询来创建两列布局，而不是1列布局。

@media screen and (min-width: 500px) {
  .box { 
    float: left;
    width: 50%; 
  }
}

As the screen gets wider again, we could fit 4 columns in so could change the width of each box to 25% instead.

随着屏幕再次变宽，我们可以容纳4列，因此可以将每个框的width改为25％。

@media screen and (min-width:500px) {
  .box { 
     width: 25%; 
  }
}

Because of how CSS styles cascade, we don’t need to specify float:left again.

由于CSS样式的级联方式，我们无需再次指定float:left 。

This approach of starting with the small screen and adding styles to make a more complex layout is known as Mobile First, as coined in the book of the same name by Luke Wroblewski.

从小屏幕开始并添加样式以制作更复杂的布局的这种方法被称为Mobile First， 该方法在Luke Wroblewski的同名书中提出。

It’s possible to go in reverse – desktop first – and start with the more complex layout. In this case, we’d start with the boxes floated and 25% wide and use max-width queries to override the styles for smaller screens. This leads to a small amount more CSS but can sometimes be easier to get your head around. However, if possible I think it best to start mobile first as it focuses thinking about design and development from the outset and reduces the risk of needing to shoehorn a complex layout onto a tiny screen.

可以反向进行-首先是台式机-并从更复杂的布局开始。 在这种情况下，我们将从浮动框和25％宽的框开始，然后使用max-width查询来覆盖较小屏幕的样式。 这会导致少量CSS，但有时更容易引起您的注意。 但是，如果可能的话，我认为最好先开始移动设备，因为它从一开始就将重点放在设计和开发方面，并降低了将复杂的布局拖到小屏幕上的风险。

It took me a while to get used to mobile first, but it’s definitely my go-to approach these days – although I’d love to know what you think…

我花了一段时间才习惯使用移动设备，但这绝对是这些天的首选方法，尽管我很想知道您的想法……

Watch out for our Quick Tip article coming soon!

请留意即将发布的“快速提示”文章！

翻译自: https://www.sitepoint.com/atoz-css-screencast-media-queries/