媒体查询

设计师可以调整设计以适应用户的需求。 最清晰的例子就是用户设备的外形规格；其宽度 例如设备的宽高比等借助媒体查询，设计人员可以针对这些不同外形规格的设备做出响应。

媒体查询使用 @media 关键字（CSS @ 规则）启动，可用于各种用例。

针对不同类型的输出

网站通常会显示在屏幕上，但 CSS 还可用于为其他输出设置网站样式。 您可能希望网页在屏幕上以一种方式显示，但在打印时却不一样。 这可以通过查询媒体类型来实现。

在此示例中，背景颜色设置为灰色。 但如果网页是打印出来的，背景颜色应是透明的。 这样可以节省用户的打印机墨水。

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

您可以在样式表中使用 @media at 规则，如下所示： 或者，您也可以单独创建一个样式表，并对 link 元素使用 media 属性：

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

如果您没有为 CSS 指定任何媒体类型 它的媒体类型值会自动设为 all。这两个 CSS 块是等效的：

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

以下两行 HTML 也是等效的：

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

查询条件

您可以为媒体类型添加条件。这些查询称为媒体查询。 仅当媒体类型匹配且条件成立时，系统才会应用 CSS。 这些条件称为“媒体功能”。

以下是媒体查询的语法：

@media type and (feature)

如果您的样式位于单独的样式表中，则您可以对 link 元素使用媒体查询：

<link rel="stylesheet" href="specific.css" media="type and (feature)">

假设您想根据浏览器窗口是否处于横屏模式来应用不同的样式 （视口宽度大于高度）或纵向模式 （视口高度大于宽度）。 您可以使用一项名为 orientation 的媒体功能来测试该功能：

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

或者，如果您想使用单独的样式表：

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

在这种情况下，媒体类型为 all。由于这是默认值，因此如果您有以下要求，可以将其省略：

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

或使用单独的样式表：

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

虽然您可以针对不同的媒体类型（例如 print）使用单独的样式表， 最好不要为每个媒体查询使用单独的样式表。请改用 @media at-rules。

根据视口大小调整样式

对于自适应设计，最有用的媒体功能之一就是浏览器视口的尺寸。 如需在浏览器窗口宽度超过特定宽度时应用样式，请使用 min-width。

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

使用 max-width 媒体功能可在低于特定宽度的情况下应用样式：

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

您可以在媒体查询中使用任何 CSS 长度单位。 如果您的内容主要是图片内容，则最好使用像素。 如果您的内容以文字为主 使用基于文本大小的相对单位（例如 em 或 ch）可能更有意义：

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

您还可以组合媒体查询以应用多个条件。 使用 and 一词来组合您的媒体查询：

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

根据内容选择断点

媒体功能条件变为 true 的点称为断点。 最好根据内容（而不是热门设备尺寸）来选择断点。 因为这些因素会随着每个技术发布周期而发生变化。

在此示例中，50em 就是文本行过长的时间点。 因此，我们创建了一个断点，以使界面更清晰易读。 通过使用 column-count 属性，文本从该时间点开始分为两列。

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

组合

您可以根据视口的高度（而不仅仅是宽度）使用媒体查询。 这对于优化“首屏”界面内容非常有用。在前面的示例中， 如果读者使用的浏览器窗口很宽但很短 他们必须向下滚动一列，然后再向上滚动，直至看到第二列的顶部。 仅在视口足够宽且足够高时应用列会更加安全。

您可以合并媒体查询，以便仅在所有条件均为 true 时才应用样式。 在本例中，视口的宽度必须至少为 50em 且高度至少为 60em，才能应用列样式。 这些断点是根据内容量选择的。

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

这些示例展示了如何使用媒体查询来使设计适应用户设备的外形规格。 但这些可能只是冰山一角。媒体查询可以远远不止是宽度和高度， 访问用户对无障碍功能和主题颜色的偏好设置。 使用媒体查询调整布局是自适应设计的一个良好开端，自适应设计以上述功能等为基础。

检查您的理解情况

测试您对自适应媒体查询的掌握情况。