媒体查询

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

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

针对不同类型的输出

网站通常显示在屏幕上，但 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">

查询条件

您可以向媒体类型添加条件。这些查询称为媒体查询。 仅当媒体类型匹配且条件也为 true 时，系统才会应用 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 @ 规则。

根据视口大小调整样式

对于自适应设计，最有用的媒体功能之一涉及浏览器视口的尺寸。如需在浏览器窗口宽度超过特定宽度时应用样式，请使用 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;
  }
}

这些示例展示了如何使用媒体查询来使设计适应用户设备的外形规格，但这些示例只是发掘了各种可能性。媒体查询可以获取用户对无障碍功能和主题颜色的偏好，而不仅仅是宽度和高度。使用媒体查询调整布局，是自适应设计的一个很好的起点，这种设计以这些功能及更多其他功能为基础。

检查您的掌握程度

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