@media
======

Resumen
-------

La regla-at CSS `@media` asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una condición definida por un media query. La regla-at `@media` puede ser usada no solo en el nivel superior de la hoja de estilos, sino también dentro de cualquier grupo de reglas condicionales.

La regla-at `@media` puede ser accesible por medio de la interfaz de modelo de objeto `CSSMediaRule` (en-US).

Sintaxis
--------
```

@media =   
  @media <media-query-list> { <rule-list> }    
  
```


Un `<media-query>` está compuesto por un tipo de medio opcional y/o un conjunto de características de medio.

Tipos de medios
---------------

`all`

Aplicable a todos los dispositivos.

`print`

Destinado a material paginado y documentos visibles en una pantalla en modo de vista previa para impresión. Por favor, consulte la sección de medios paginados (en-US), y la sección de Media en el tutorial de Introducción para más información acerca de problemas de formateo específicos para los medios paginados.

`screen`

Destinado a principalmente a pantallas de computadora a color.


**Nota:** CSS2.1 y Media Queries 3 definió varios tipos de media adicionales (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`, `speech`), pero fueron descontinuados en Media Queries 4 y no deben ser usados.

Características de Medios (media feature)
-----------------------------------------

Cada *característica de medios* verifica una característica específica del navegador o dispositivo.

| Nombre | Resumen | Notas |
| --- | --- | --- |
| `width` | Anchura del viewport |  |
| `height` | Altura del viewport |  |
| `aspect-ratio` (en-US) | Relación de aspecto anchura-altura del viewport |  |
| `orientation` (en-US) | Orientación del viewport |  |
| `resolution` | Densidad de pixeles del dispositivo |  |
| `scan` | Proceso de escaneo del dispositivo |  |
| `grid` (en-US) | ¿El dispositivo es un grid o un mapa de bits? |  |
| `update-frequency` (en-US) | Qué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenido | Incluido en Media Queries Nivel 4 |
| `overflow-block` (en-US) | Cómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque | Incluido en Media Queries Nivel 4 |
| `overflow-inline` (en-US) | ¿Puede desplazarse hacia el contenido que excede los límites del viewport? | Incluido en Media Queries Nivel 4 |
| `color` | Componente de número de bits por color del dispositivo, o cero si el dispositivo no es a color. |  |
| `color-index` (en-US) | Número de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla. |  |
| `display-mode` | Modo de visualización de la aplicación, según se especifique en la propiedad display del manifiesto de la aplicación web. | Definido en la especificación del Manifiesto de Aplicación Web. |
| `monochrome` (en-US) | Bits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático. |  |
| `inverted-colors` (en-US) | ¿El agente usuario o el Sistema Operativo está invirtiendo los colores? | Incluido en Media Queries Nivel 4 |
| `pointer` | ¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es? | Incluido en Media Queries Nivel 4 |
| `hover` | ¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos? | Incluido en Media Queries Nivel 4 |
| `any-pointer` (en-US) | ¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste? | Incluido en Media Queries Nivel 4 |
| `any-hover` (en-US) | ¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos? | Incluido en Media Queries Nivel 4 |
| `light-level` | Nivel de luz ambiental actual | Incluido en Media Queries Nivel 4 |
| `scripting` (en-US) | ¿Se soporta lenguaje de script (p.ej. JavaScript)? | Incluido en Media Queries Nivel 4 |
| `device-width` (en-US) 
Obsoleto
 | Anchura de la superficie de representación del dispositivo | Descontinuado en Media Queries Nivel 4 |
| `device-height` (en-US) 
Obsoleto
 | Altura de la superficie de representación del dispositivo | Descontinuado en Media Queries Nivel 4 |
| `device-aspect-ratio` (en-US) 
Obsoleto
 | Relación de aspecto anchura-altura del dispositivo | Descontinuado en Media Queries Nivel 4 |
| `-webkit-device-pixel-ratio` (en-US) 
Non-standard
 | Número de pixeles reales del dispositivo por pixel CSS | No estándar; Específica de WebKit/Blink. De ser posible, use la característica `resolution en su lugar`. |
| `-webkit-transform-3d` (en-US) 
Non-standard
 | ¿Se soportan `transformaciones` 3D? | No estándar; Específica de WebKit/Blink |
| `-webkit-transform-2d` (en-US) 
Non-standard
 | ¿Se soportan `transformaciones` 2D? | No estándar; Específica de WebKit |
| `-webkit-transition` (en-US) 
Non-standard
 | Se soportan `transiciones` CSS? | No estándar; Específica de WebKit |
| `-webkit-animation` (en-US) 
Non-standard
 | ¿Se soportan `animaciones` CSS? | No estándar; Específica de WebKit |

Ejemplos
--------


```css
@media print {
  body {
    font-size: 10pt;
  }
}
@media screen {
  body {
    font-size: 13px;
  }
}
@media screen, print {
  body {
    line-height: 1.2;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    line-height: 1.4;
  }
}
```

Especificaciones
----------------

| Specification |
| --- |
| Media Queries Level 4 # media-descriptor-table |
| CSS Conditional Rules Module Level 3 # at-media |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Media queries
* El modelo CSSOM `CSSMediaRule` (en-US) asociado a esta regla-at.