Media queries为我们提供了一种非常强大的方式，可以根据所使用的设备类型、视口大小、屏幕像素密度甚至设备方向等因素来调整我们的风格。由于媒体查询已经存在了相当长的一段时间，您可能已经熟悉了基本的语法和用法。因此，这篇文章旨在成为一个很好的快速参考点，希望你也会发现一些你不知道的技巧是可能的。

媒体基本查询

媒体查询使用 @media at规则定义，后跟媒体类型、0个或多个媒体功能或媒体类型和媒体功能。可用的媒体类型为all、打印、屏幕和语音，如果未指定，则隐含all类型。可以同时使用多个媒体类型，它们应该用逗号分隔：

1@media screen, print {
2  /* Styles for screen and print devices */
3}

<$>[警告]媒体类型（如电视或投影)已被媒体播放器级别4弃用。<$>

至于媒体功能，它们在括号中定义，可以测试大量的功能。一些最受欢迎的特征是宽度、高度、纵横比、方向和分辨率。其中许多流行的功能都是范围功能，因此它们也有最小和最大版本可用(例如：最小宽度、最大宽度、最小长宽比、最大长宽比等)

在下面的简单示例中，默认背景颜色为热粉色，但视区宽度为650px或更小的屏幕设备的背景颜色将改为rebeccapurple：

1body {
2  background: hotpink;
3}
4
5@media screen and (max-width: 650px) {
6  body {
7    background: rebeccapurple;
8  }
9}

请注意，当同时指定媒体类型和媒体功能时，我们需要在它们之间使用AND逻辑运算符。

以下是一些简单的媒体查询示例，它们可以指定媒体类型、媒体功能或两者都指定：

 1@media print {
 2  /* styles for print media only */
 3}
 4
 5@media (max-width: 65rem) {
 6  /* styles for any device that has a display width of 65rem or less */
 7}
 8
 9@media screen and (min-width: 800px) {
10  /* styles for screen viewports that have a width of 800px or more */
11}

多媒体功能

您可以使用功能之间的AND逻辑运算符指定多个媒体功能要求以满足媒体查询。使用AND时，仅当所有要素的计算结果均为TRUE时，查询才匹配。例如，布局调整到几个不同的视区宽度范围是很常见的：

 1/* Extra-small */
 2@media screen and (max-width: 360px) {
 3  /* ... */
 4}
 5
 6/* Small */
 7@media screen and (min-width: 361px) and (max-width: 480px) {
 8  /* ... */
 9}
10
11/* Medium-only */
12@media screen and (min-width: 481px) and (max-width: 960px) {
13  /* ... */
14}
15
16/* ... */

或使用逗号的逻辑运算符

您可以定义多个用逗号分隔的查询，在这种情况下，逗号充当逻辑或运算符，查询将成为查询列表。如果任何逗号分隔查询匹配，则将应用媒体查询。

在下面的示例中，如果设备的方向为纵向，或者设备的视区的最小宽度为3rem，最大纵横比为2/1，则媒体查询将为True：

1@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) {
2  /* ... */
3}

非逻辑运算符

您可以在查询的开头使用NOT逻辑运算符来切换整个查询的真实性。当浏览器或设备不满足某些条件时，Not运算符对于应用样式很有用。在以下示例中，当主定点设备不能悬停在元素上时，将应用媒体查询：

1@media not screen and (hover: hover) {
2  /* ... */
3}

<$>[注意]请注意，使用NOT时，媒体类型不是可选的。而且，NOT不会否定整个查询列表(用逗号分隔的查询)，而是只否定一个查询。<$>

只有逻辑运算符

唯一的逻辑运算符有点特殊，它对较旧的浏览器隐藏了整个查询。换句话说，较老的浏览器不理解only 关键字，所以整个媒体查询都会被忽略。否则只有不起作用：

1@media only all and (min-width: 320px) and (max-width: 480px) {
2  /* ignored by older browsers */
3}

<$>[注意]与NOT运算符一样，仅使用时，媒体类型不是可选的。请注意，不支持媒体查询级别3的传统浏览器现在很少，因此在大多数情况下，只使用是不必要的。<$>

媒体查询新增4级

最新版本的媒体查询规范(4级)指定了相当多可以测试的新媒体功能：

指针：如果有主要指向设备(无、粗略或精细)。
任意指针：如果有任何指向设备可用(无、粗略或精细)。
悬停：主定点设备是否可以悬停在元素上(无或悬停)。
任意悬停：任何可用的定点设备都可以悬停在元素上(无或悬停)。
色域：可选颜色的范围(sRGB、p3或rec2020)。
Overflow-Inline：如何处理内联轴上的潜在溢出(无、分页、可选-分页或滚动)。
OVERFLOW-BLOCK：如何处理块轴上的潜在溢出(无、分页、可选-分页或滚动)。
更新：版面可以更新的频率(无、慢或快)。

针对Retina显示屏的媒体查询

在过去的几年里，我们已经开始看到显示器具有更高像素密度的设备的激增。对于具有这些较高像素密度的设备，以不同的方式设计设计的某些方面可能会很有用。提供某些图形的高分辨率版本就是一个很好的例子。

我们可以使用192 dpi的最小分辨率媒体功能来实现这一点。但是，分辨率特性并不一定在所有浏览器中都受支持，为了更简单，我们还可以添加一个值为2的非标准webkit-min-device-pixel-ratio特性：

1@media screen and
2  (min-resolution: 192dpi),
3  (-webkit-min-device-pixel-ratio: 2) {
4    /* ... */
5}

您可以跟踪当前浏览器对分辨率媒体功能的支持在Can I Use.上

资源

以下是一些与媒体查询相关的非常有用的资源：

css-Tricks‘标准Devices.的媒体查询
MQTest.io，用于测试您的设备响应哪些媒体功能。
MDN‘s可用媒体features.参考

CSS 媒体查询：快速参考和指南