定义

媒体查询由媒体类型和至少一个查询组成，该查询使用媒体特征（例如宽度、高度和颜色）来限制样式表。它被理解为一个 CSS3 模块，允许使内容的表示适应设备的特性。

在 CSS3 中添加的媒体查询允许内容的呈现适应特定范围的输出设备，而无需更改内容本身。也就是英文所说的响应式设计，也就是根据屏幕大小适配每台设备。

句法

媒体查询由一种媒体类型组成，在 CSS 中由 表示@media，以及一个或多个表达式，暗示媒体的特征，解析为真或假。如果媒体查询中指定的媒体类型与正在显示的设备类型匹配并且媒体查询中的所有表达式为真，则查询结果为真。

查询不区分大小写。包含未知媒体类型的媒体查询将始终返回 false。

与任何其他样式元素一样，媒体查询可以在<link />HTML 元素中使用，该元素将引用具有 .css 扩展名的文件：

<!-- CSS media query un elemento link -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

或者直接，不通过链接元素：

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

当媒体查询为真时，将应用相应的样式表或样式规则，遵循正常的级联规则。

在媒体查询中，既不使用not也不only意味着媒体类型是可选的，将被解释为all.

逻辑运算符

可以使用逻辑运算符编写查询，包括not、and和only。

此外，您可以将多个查询组合成一个多个逗号分隔的列表；如果列表中的任何查询为真，则应用关联的样式表。这相当于一个逻辑运算“ or”。

和

运算符and用于将多种多媒体功能组合在一起。具有指定媒体类型的基本查询all可能如下所示：

@media (min-width: 700px) { ... }

如果您只想在屏幕为水平格式时应用此查询，您可以使用运算符and并放置以下字符串：

@media (min-width: 700px) and (orientation: landscape) { ... }

只有当窗口为 700 像素或更大且屏幕为横向时，以下查询才会返回 true。现在，如果您只想在媒体类型是电视 (tv) 时应用此选项，则可以使用以下频道完成：

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

此查询仅适用于媒体类型为 TV、窗口为 700 像素或更大且屏幕为横向的情况。

逗号分隔列表

or在媒体查询中使用时，逗号分隔列表的行为类似于运算符。当您使用逗号分隔列表并且其中一个查询返回 true 时，将应用样式或样式表。逗号分隔列表中的每个查询都被视为单独的查询，应用于一种介质的任何运算符都不会影响其他介质。这意味着逗号分隔列表中的每个查询都可以针对不同的媒体、类型和状态。

如果您想将一系列样式应用于最小宽度为 700px 的设备，或者如果设备水平放置，则可以这样完成：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

因此，如果它在一个窗口为 800px 宽的屏幕上，由于列表的第一部分，中间语句将返回 true，如果我们将其应用于设备，@media all and (min-width: 700px)尽管屏幕失败，它可能会返回 true。媒体类型检查在第二个查询中的手持设备。另一方面，如果它在窗口宽度为 500 像素的手持设备上，则列表的第一部分将失败，但由于中间声明，第二部分将返回 true。

不是

该运算符not适用于整个查询，如果可能则返回 true，否则返回 false（例如彩色监视器上的单色或监视器上最小宽度min-width: 700px为 600 像素的窗口）。如果可能， Anot将否定查询，但如果它们位于逗号分隔列表中，则不会否定所有可能的查询。运算符not不能用于否定单个查询，只能用于整个查询。例如，not以下查询中的 the 最后评估：

@media not all and (monochrome) { ... }

这意味着查询的评估如下：

@media not (all and (monochrome)) { ... }

...而不是这样：

@media (not all) and (monochrome) { ... }

另一个例子：

@media not screen and (color), print and (color)

评估如下：

@media (not (screen and (color))), print and (color)

只要

运算符only会阻止不支持函数查询的旧浏览器应用指定的样式：

<link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" />

按设备组的媒体查询

以下是目前市场上主要设备中使用的媒体查询。此代码可在css-tricks.com上找到

请注意，对于相同品牌的设备，查询会有所不同，因为这些设备的屏幕尺寸不同。

portrait垂直被设备理解，landscape水平被设备理解。

电话

苹果手机

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

星系

 /* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}

谷歌像素

/* ----------- Google Pixel ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Google Pixel XL ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: landscape) {

}

宏达电

/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

窗户电话

/* ----------- Windows Phone ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px) {

}

/* Portrait */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px)  
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px) 
  and (orientation: landscape) {

}

片剂

iPad

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

星系

 /* ----------- Galaxy Tab 2 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/* ----------- Galaxy Tab S ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) { 

}

关系

/* ----------- Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

/* ----------- Nexus 9 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

点燃火

/* ----------- Kindle Fire HD 7" ----------- */

/* Retrato y Paisaje */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Retrato */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Paisaje */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Retrato y Paisaje */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Retrato */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Paisaje */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

笔记本电脑

媒体查询只考虑他们是否有视网膜屏幕。

/* ----------- Pantallas No-Retina ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Pantallas Retina ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

手表

苹果手表

/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

摩托 360 手表

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}

1. Mozilla 开发指南。
2. 每个设备的媒体查询：css-tricks.com

En aras de la completud de la respuesta de Cedano, existen algunas otras posibilidades para media queries:

Publicaciones

Se usa generalmente para la versión para imprimir una página, muy deseable si tu sitio es un libro, revista o peródico

@media print

Es ideal para eliminar los elementos que no conviene imprimir. Para márgenes se usa en conjunto con la regla @page que no es exclusiva de medios de tipo print por lo que puede ir dentro o afuera.

@media print {
  header,
  footer,
  aside,
  form {
    display: none;
  }
  a:after {
    content: "("attr(href)")";
  }
  h2 {
    break-before: page;
  }
  #qr:after {
    content: url(https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=https://es.stackoverflow.com/a/232846/342&choe=UTF-8);
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

@page {
  margin: 2cm;
}

<header>Encabezado no imprimible</header>
<article>Artículo que se desea imprimir con un <a href="http://www.páginadeejemplo.com">enlace de ejemplo</a>
  <h2>Título de la siguiente página</h2>
  <p>Contenido de la siguiente página</p>
  <div id="qr"></div>
</article>
<form>Formulario no imprimible</form>
<aside>barra lateral no imprimible</aside>
<footer>Pie de página no imprimible</footer>

Para verificar el demo anterior se recomienda seleccionar todo el texto y oprimir las teclas Ctrl+P en Windows o Cmd+P en Mac.

El resultado visual será similar a este:

Lectores de pantalla

Para dispositivos que soporten la lectura del contenido, a la fecha el mejor soporte de esto existía en el navegador Safari hasta que por cuestiones de patentes retiraron la funcionalidad hace ya varios años.

El css para personas débiles visuales o que no cuentan con el sentido de la visión fue retomado por la especificación de CSS3 con el advenimiento de HTML5 pero a la fecha no existe ninguna implementación, en firefox se solicitó hace casi 20 años esta característica sin avances significativos.

@media speech

speech es el remplazo de la versión ahora deprecada de CSS2

@media aural

Con esto se completan los media queries especificados en Media Queries Nivel 4

En Media Queries Nivel 3 que está en proceso de obsolesencia, se hallaban incluso más características adicionales para otros medios como:

Proyectores

@media projection {
  /* changes/adds the following properties */
  body {
    font-size: 20pt;
    margin-left: 0;
    padding: 0
  }
  body>div {
    page-break-after: always;
    border-style: none;
    margin: 0;
    width: 100%
  }
}

<div>Diapositiva 1</div>
<div>Diapositiva 2</div>

Televisiones

@media tv and (min-width: 700px)  {
   div { border: 1px solid red;}
}

<div>Con borde únicamente en televisión</div>

Lectores de Braile

HTML4 hizo obsoletos los media queries para lectores de braile paginados de CSS2 @media embossed, para ello se definió el media query

@media braille {
    h1:before{
      content: 'título';
    }
    p:before{
      content: 'inicio de párrafo';
    }
}

<h1>Ejemplo de contenido apra lector de braile</h1>
<p>Este es un ejemplo de un párrafo</p>

Si se medita un pococ en el ejemplo se verá que está pensado como otra forma de distribución de contenido, pero no está pensado en facilitar la vida a quien use esta tecnología asistiva.

Terminales como navegador

Como el HTML se originó con propósitos en mente muy diferentes a los que ahora cumple, también en CSS2 se tiene el media query tty para navegadores web de solo texto como lynx

@media only tty {
  .my-lynx-css-rule {
    ...
  }
}

<div class=".my-lynx-css-rule">Div disponible para navegadores de solo texto, pero no para navegadores viejos</div>

¿Qué media queries soporta el navegador con que estoy leyendo este artículo?

Si deseas saber que tipos de media queries reconoce el navegador que usas es recomendable acceder a esta página

Fuentes

1. w3schools
2. sympli.io
3. uxdesign.cc
4. stackoverflow en inglés
5. vanseodesign
6. Lineamientos de accesibilidad de la W3