@media

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

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, 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 Relación de aspecto anchura-altura del viewport
orientation Orientación del viewport
resolution Densidad de pixeles del dispositivo
scan Proceso de escaneo del dispositivo
grid ¿El dispositivo es un grid o un mapa de bits?
update-frequency Qué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenido Incluido en Media Queries Nivel 4
overflow-block 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 ¿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 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 Bits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático.
inverted-colors ¿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 ¿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 ¿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 ¿Se soporta lenguaje de script (p.ej. JavaScript)? Incluido en Media Queries Nivel 4
device-width Anchura de la superficie de representación del dispositivo Descontinuado en Media Queries Nivel 4
device-height Altura de la superficie de representación del dispositivo Descontinuado en Media Queries Nivel 4
device-aspect-ratio Relación de aspecto anchura-altura del dispositivo Descontinuado en Media Queries Nivel 4
-webkit-device-pixel-ratio 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 ¿Se soportan transformaciones 3D? No estándar; Específica de WebKit/Blink
-webkit-transform-2d ¿Se soportan transformaciones 2D? No estándar; Específica de WebKit
-webkit-transition Se soportan transiciones CSS? No estándar; Específica de WebKit
-webkit-animation ¿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

Véase también