Definition

A media query consists of a media type and at least one query that limits style sheets using media characteristics such as width, height, and color. It is understood as a CSS3 module that allows adapting the representation of the content to the characteristics of the device.

Added in CSS3, media queries allow the presentation of content to adapt to a specific range of output devices without having to change the content itself. It is what is called in English a responsive design , that is, it adapts to each device according to the size of the screen.

Syntax

Media queries consist of a media type, represented in CSS by @media, and one or more expressions, implying media characteristics, which resolve to true or false. The query result is true if the media type specified in the media query matches the type of device being displayed and all expressions in the media query are true.

Queries are case insensitive. Media queries containing unknown media types will always return false.

Like any other style element, media queries can be used in an <link />HTML element, which will refer to a file with a .css extension:

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

Or directly, without going through the link element:

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

When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

When within a media query neither is used notnor does it onlymean that the media type is optional and will be interpreted as all.

Logical operators

Queries can be written using logical operators, including not, and, and only.

Additionally you can combine multiple queries into a multiple comma separated list; if any of the queries in the list is true, the associated style sheet is applied. This is equivalent to a logical operation " or".

and

The operator andis used to put together multiple multimedia functions. A basic query with the media type specified as allmight look like this:

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

If you want to apply this query only if the screen is in horizontal format, you can use the operator andand place the following string:

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

The following query will only return true if the window is 700px wide or more and the screen is landscape. Now if you want to apply this option only if the type of media is a television (tv), it would be done with the following channel:

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

This query only applies if the media type is TV, the window is 700px wide or larger, and the screen is landscape.

comma separated list

Comma separated lists behave like the operator orwhen used in media queries. When you use a comma separated list and one of the queries returns true, the style or style sheet will be applied. Each query in a comma separated list is treated as an individual query and any operator applied to one medium will not affect the others. This means that each query in a comma-separated list can target different media, types, and states.

If you want to apply a series of styles to a device with a minimum width of 700px or if the device is placed horizontally, it would be done like this:

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

So if it's on a screen with a window 800px wide, the middle statement will return true because of the first part of the list, if we apply this to a device it @media all and (min-width: 700px)might return true despite the fact that the screen fails. the media type check of the handheld in the second query. On the other hand if it were on a handheld with a window width of 500px, the first part of the list would fail but the second part would return true because of the middle declaration.

not

The operator notapplies to the entire query and returns true if possible and false if not (such as monochrome on a color monitor or a window with a minimum width min-width: 700pxof 600px on a monitor). A notwill negate a query if possible but not all possible queries if they are located in a comma-separated list. The operator notcannot be used to negate an individual query, only for an entire query. For example, the notin the following query is evaluated last:

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

This means that the query is evaluated as follows:

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

... and not like this:

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

Another example:

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

It is evaluated as follows:

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

only

The operator onlyprevents older browsers that don't support queries with functions from applying the assigned styles:

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

Media queries by device groups

Here are the media queries used in the main devices currently on the market. This code is found at css-tricks.com

Note that for the same brand of device, the queries vary because these devices do not have the same screen sizes.

Be understood by portraitthe device vertically, and by landscapethe device horizontally.

phones

iPhone

/* ----------- 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

 /* ----------- 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

/* ----------- 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

/* ----------- 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

/* ----------- 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) {

}

tablets

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

 /* ----------- 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

/* ----------- 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

/* ----------- 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) {

}

laptop

Media queries only taking into account whether they have a retina screen or not.

/* ----------- 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) { 
}

watches

Apple Watch

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

}

Moto 360 Watch

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

}

1. Mozilla Development Guide .
2. Media queries per device: 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