31

¿Qué @media queries utilizar para alcanzar los principales dispositivos tomando en cuenta las dimensiones y resoluciones de pantalla?

¿Cómo se da alcance a dispositivos por grupos (por ejemplo, todas las tablets) dentro de un media query para aplicarles reglas de estilo?

La intención es tener una visión más amplia de los media queries, no de las reglas de @ en general.

Mariano
  • 23,777
  • 20
  • 70
  • 102
A. Cedano
  • 86,578
  • 19
  • 122
  • 221
  • 6
    Relacionado: [¿Qué significa la arroba (@) en CSS?](http://es.stackoverflow.com/q/17860/127) – Mariano Feb 21 '17 at 17:40

2 Answers2

29

Definición

Un media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo.

Añadidos en CSS3, los media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí. Es lo que se llama en inglés un diseño responsive, o sea, que se adapta a cada dispositivo según el tamaño de la pantalla.

Sintaxis

Los Media queries constan de un media type, respresentado en CSS por @mediay de una o más expresiones, implicando características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas.

Los queries son insensibles a las mayúsculas o minúsculas (case insensitive). Media queries que contengan tipos de medios desconocidos siempre retornarán falso.

Como cualquier otro elemento de estilo, los media queries se pueden usar en un elemento <link /> del HTML, que hará referencia a un archivo con extensión .css:

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

O bien directamente, sin pasar por el elemento link:

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

Cuando un media query es verdadero, la hoja de estilo correspondiente o reglas de estilos son aplicadas, siguiendo las reglas normales de cascada.

Cuando dentro de un media query no se usa not ni only significa que el tipo de medio es opcional y será interpretado como all.

Operadores Lógicos

Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.

Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".

and

El operador and es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como all puede lucir así:

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

Si se quiere aplicar ese query solo si la pantalla está en formato horizontal, se puede utilizar el operador and y colocar la siguiente cadena:

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

La siguiente query solo retornará verdadero si la ventana tiene un ancho de 700px o más y la pantalla está en formato horizontal. Ahora si se quiere aplicar esta opción solo si el tipo de medio es una televisión (tv), se haría con la siguiente cadena:

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

Esta query sólo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o más y la pantalla está en formato horizontal.

lista separada por comas

Las listas separadas por comas se comportan como el operador or cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos será aplicada. Cada query en una lista separada por comas es tratado como un query individual y cualquier operador aplicado a un medio no afectará a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.

Si se quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, se haría así:

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

Por lo tanto, si está en una pantalla con una ventana de 800px de ancho, la declaración del medio retornará verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo @media all and (min-width: 700px) podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del handheld en la segunda query. Por otra parte si estuviese en un handheld con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornará verdadero debido a la declaración de medio.

not

El operador not aplica a todo el query y retorna verdadero si es posible y si no retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negará un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un query individual, sólo para un query completo. Por ejemplo, el not en el siguiente query es evaluado al final:

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

Esto significa que el query es evaluado de la siguiente forma:

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

... y no de esta forma:

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

Otro Ejemplo:

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

Es evaluado de la siguiente forma:

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

only

El operador only previene que navegadores antiguos que no soportan queries con funciones que apliquen los estilos asignados:

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

Media queries por grupos de dispositivos

He aquí los media queries usados en los principales dispositivos que existen actualmente en el mercado. Este código se encuentra en css-tricks.com

Nótese que para una misma marca de dispositivo las queries varían porque dichos dispositivos no tienen los mismos tamaños de pantalla.

Entiéndase por portrait el dispositivo en forma vertical, y por landscape el dispositivo en forma horizontal.

Teléfonos

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

}


Tabletas

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

}

Laptops

Media queries sólo tomando en cuenta si tienen o no pantalla retina.

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

Relojes

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

}


Enlaces:
  1. Guía de desarrollo Mozilla.
  2. Media queries por dispositivo: css-tricks.com
A. Cedano
  • 86,578
  • 19
  • 122
  • 221
  • 11
    Esto deberia ser considerado Wiki de comunidad formulada y respondida el 21 feb. a las 16:48 – Jorgesys Mar 02 '17 at 03:51
  • 5
    @Jorgesys ¿Cuáles son los criterios para considerarla Wiki de comunidad? Había entendido que las respuestas susceptibles de ser editadas por varios usuarios para agregar algo. En este caso la respuesta está completa. – A. Cedano Mar 02 '17 at 09:58
3

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:

página 1

página 2

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
Ruslan López
  • 10,060
  • 11
  • 35
  • 68