设计师可以调整其设计以适应用户。 最明显的例子就是用户设备的外形规格；设备的宽度、设备宽高比等。使用媒体查询，设计师可以针对这些不同的外形规格做出响应。
媒体查询使用 @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 属性规则。
根据视口大小调整样式
对于自适应设计，最有用的媒体功能之一就是浏览器视口的尺寸。
如需在浏览器窗口宽度超过特定宽度时应用样式，请使用 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;
}
}
这些示例展示了如何使用媒体查询来使设计适应用户设备的外形规格。 但这些可能只是冰山一角。媒体查询可以远远不止是宽度和高度， 访问用户对无障碍功能和主题颜色的偏好设置。 使用媒体查询调整布局是自适应设计的良好开端，自适应设计以这些功能为基础，还会结合使用其他功能。
检查您的理解情况
测试您对自适应媒体查询的掌握情况。
媒体查询仅适用于屏幕尺寸？
屏幕是 Web 内容的唯一消费或展示途径吗？
默认媒体类型是什么？
screenscreen 不是默认类型。nonenone”不是有效的媒体类型。allsomesome”不是有效的媒体类型。landscapelandscape”不是有效的媒体类型。您会使用什么来阻止浏览器在移动设备上缩放设计？
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">当浏览器窗口的宽度大于 720px 时，应用哪个媒体查询。
@media (width: 720px)720px 时，才会触发此媒体查询。@media (max-width: 720px)720px 的时间。@media (min-width: 720px)720px。@media (clamp-width: 720px)clamp-width 不是有效的媒体查询功能条件。