@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.

* Some parts of this feature may have varying levels of support.

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 Obsoleto Anchura de la superficie de representación del dispositivo Descontinuado en Media Queries Nivel 4
device-height Obsoleto Altura de la superficie de representación del dispositivo Descontinuado en Media Queries Nivel 4
device-aspect-ratio Obsoleto Relación de aspecto anchura-altura del dispositivo Descontinuado en Media Queries Nivel 4
-webkit-device-pixel-ratio No estándar 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 No estándar ¿Se soportan transformaciones 3D? No estándar; Específica de WebKit/Blink
-webkit-transform-2d No estándar ¿Se soportan transformaciones 2D? No estándar; Específica de WebKit
-webkit-transition No estándar Se soportan transiciones CSS? No estándar; Específica de WebKit
-webkit-animation No estándar ¿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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@media
-moz-device-pixel-ratio media feature
DeprecatedNon-standard
-webkit-animation media feature
DeprecatedNon-standard
-webkit-device-pixel-ratio media feature
-webkit-max-device-pixel-ratio media feature
-webkit-min-device-pixel-ratio media feature
-webkit-transform-2d media feature
Non-standard
-webkit-transform-3d media feature
-webkit-transition media feature
DeprecatedNon-standard
any-hover media feature
any-pointer media feature
aspect-ratio media feature
calc() expressions
color media feature
color-gamut media feature
color-index media feature
device-aspect-ratio media feature
Deprecated
device-height media feature
Deprecated
device-posture media feature
Experimental
device-width media feature
Deprecated
display-mode media feature
picture-in-picture value
Experimental
dynamic-range media feature
forced-colors media feature
grid media feature
height media feature
hover media feature
inverted-colors media feature
Media feature expressions
Media query value support
monochrome media feature
Nested media queries
or syntax from Media Queries Level 4
orientation media feature
overflow-block media feature
overflow-inline media feature
pointer media feature
prefers-color-scheme media feature
no-preference value
DeprecatedNon-standard
Respects color-scheme inherited from parent
Non-standard
prefers-contrast media feature
prefers-reduced-data media feature
Experimental
prefers-reduced-motion media feature
prefers-reduced-transparency media feature
Experimental
Range syntax from Media Queries Level 4
resolution media feature
scripting media feature
update media feature
video-dynamic-range media feature
width media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

Véase también