设计人员可以调整其设计以适应用户。最明显的例子是用户设备的外形尺寸；它的宽度、设备宽高比等等。使用媒体查询，设计人员可以响应这些不同的外形尺寸。
媒体查询以 @media 关键字（CSS at-rule）开头，可用于各种用例。
针对不同类型的输出
网站通常显示在屏幕上，但 CSS 也可用于为其他输出设置网站样式。您可能希望您的网页在屏幕上的外观与打印出来的外观不同。查询媒体类型使这成为可能。
在此示例中，背景颜色设置为灰色。但是，如果页面被打印出来，背景颜色应为透明。这可以节省用户的打印机墨水。
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
您可以像这样在样式表中使用 @media at-rule，或者您可以创建一个单独的样式表，并在 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-rule。
根据视口大小调整样式
对于自适应设计，最有用的媒体功能之一涉及浏览器视口的尺寸。要在浏览器窗口宽度大于特定宽度时应用样式，请使用 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.
}
根据内容选择断点
媒体功能条件变为真值的点称为断点。最好根据您的内容而不是流行的设备尺寸来选择断点，因为这些尺寸会随着每个技术发布周期而变化。
在此示例中，50em 是文本行变得令人不舒服地长的点。因此，创建了一个断点以使界面更清晰易读。使用 column-count 属性，从该点开始将文本分为两列。
@media (min-width: 50em) {
article {
column-count: 2;
}
}
组合
您可以使用基于视口高度的媒体查询，而不仅仅是宽度。这对于优化“首屏”界面内容可能很有用。在前面的示例中，如果读者使用宽而短的浏览器窗口，他们必须向下滚动一列，然后再向上滚动回到第二列的顶部。仅当视口足够宽且足够高时才应用列会更安全。
您可以组合媒体查询，以便仅当所有条件都为真时才应用样式。在此示例中，视口必须至少 50em 宽且 30em 高，才能应用列样式。这些断点是根据内容量选择的。
@media (min-width: 50em) and (min-height: 30em) {
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 不是有效的媒体查询功能条件。