Las consultas de medios le permiten adaptar su sitio o aplicación dependiendo de la presencia o el valor de varias características y parámetros del dispositivo.

Son un componente clave del responsive design. Por ejemplo, una consulta de medios puede reducir el tamaño de la fuente en dispositivos pequeños, aumentar el relleno entre párrafos cuando se ve una página en modo vertical, o aumentar el tamaño de los botones en las pantallas táctiles.

En CSS, use la @ media at-rule para aplicar condicionalmente parte de una hoja de estilo en función del resultado de una consulta de medios. Use @ import para aplicar condicionalmente una hoja de estilo completa.

 

Consultas de medios en HTML

En HTML, las consultas de medios se pueden aplicar a varios elementos:

     En el atributo <link> media del elemento, definen los medios a los que se debe aplicar un recurso vinculado (normalmente CSS).
     En el atributo <source> media del elemento, definen los medios a los que se debe aplicar esa fuente. (Esto solo es válido dentro de los elementos <picture>.)
     En el atributo <style> del elemento media, definen los medios a los que se debe aplicar el estilo.

 

Consultas de medios en JavaScript

 

En JavaScript puede usar el método Window.matchMedia () para probar la ventana contra una consulta de medios. También puede usar MediaQueryList.addListener () para recibir notificaciones cada vez que cambie el estado de una consulta. Con esta funcionalidad, su sitio o aplicación puede responder a los cambios en la configuración, orientación o estado del dispositivo.

Puede obtener más información sobre el uso programático de consultas de medios en Pruebas de consultas de medios.

Referencias

At-rules

Guides

Usando consultas de medios
Presenta las consultas de los medios, su sintaxis y los operadores y las funciones de los medios que se utilizan para construir expresiones de consulta de los medios.
Probando las consultas de medios programáticamente
Describe cómo usar las consultas de medios en su código de JavaScript para determinar el estado de un dispositivo, y para configurar escuchas que notifican su código cuando cambian los resultados de las consultas de medios (como cuando el usuario gira la pantalla o cambia el tamaño del navegador).
Usando consultas de medios en accesibilidad
Conozca cómo Media Queries puede ayudar a los usuarios a comprender mejor su sitio web.

Especificaciones

Especificación Estado Comentario
Media Queries Level 5 Editor's Draft  
CSS Conditional Rules Module Level 3 Candidate Recommendation  
Media Queries Level 4 Candidate Recommendation  
Media Queries Recommendation  
CSS Level 2 (Revision 1) Recommendation Initial definition

Compatibilidades con navegadores

@media rule

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1IE Soporte completo 6Opera Soporte completo 9.2Safari Soporte completo 1.3WebView Android Soporte completo 1Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 9Safari iOS Soporte completo 3.1Samsung Internet Android ?
speech media typeChrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 9.2Safari Sin soporte NoWebView Android Sin soporte NoChrome Android ? Edge Mobile Sin soporte NoFirefox Android Sin soporte NoOpera Android Soporte completo 9Safari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Media feature expressionsChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1IE Soporte completo 9Opera Soporte completo 9.2Safari Soporte completo 1.3WebView Android Soporte completo 1Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 9Safari iOS Soporte completo 3.1Samsung Internet Android ?
any-hover media featureChrome Soporte completo 41Edge Soporte completo 16Firefox Soporte completo 64IE Sin soporte NoOpera Soporte completo 28Safari Soporte completo 9WebView Android Soporte completo 41Chrome Android Soporte completo 41Edge Mobile Sin soporte NoFirefox Android Soporte completo 64Opera Android Soporte completo 28Safari iOS Soporte completo 9.2Samsung Internet Android Soporte completo 5.0
any-pointer media featureChrome Soporte completo 41Edge Soporte completo 12Firefox Soporte completo 64IE Sin soporte NoOpera Soporte completo 28Safari Soporte completo 9WebView Android Soporte completo 41Chrome Android Soporte completo 41Edge Mobile Soporte completo 12Firefox Android Soporte completo 64Opera Android Soporte completo 28Safari iOS Soporte completo 9.2Samsung Internet Android ?
aspect-ratio media featureChrome Soporte completo 4Edge ? Firefox Soporte completo 3.5IE Soporte completo 9Opera Soporte completo 53Safari Soporte completo SiWebView Android Soporte completo SiChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
color media featureChrome Soporte completo SiEdge ? Firefox Soporte completo SiIE ? Opera Soporte completo SiSafari Soporte completo SiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
color-gamut media featureChrome Soporte completo 58Edge ? Firefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 45Safari Soporte completo SiWebView Android ? Chrome Android Soporte completo 58Edge Mobile ? Firefox Android Sin soporte NoOpera Android Soporte completo 45Safari iOS ? Samsung Internet Android ?
color-index media feature
No estándar
Chrome Soporte completo SiEdge ? Firefox Sin soporte NoIE Sin soporte NoOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
device-aspect-ratio media feature
DeprecatedNo estándar
Chrome Soporte completo SiEdge ? Firefox Soporte completo SiIE ? Opera ? Safari ? WebView Android ? Chrome Android Soporte completo SiEdge Mobile ? Firefox Android Soporte completo SiOpera Android ? Safari iOS ? Samsung Internet Android ?
device-height media feature
DeprecatedNo estándar
Chrome Soporte completo SiEdge ? Firefox Soporte completo SiIE ? Opera ? Safari ? WebView Android ? Chrome Android Soporte completo SiEdge Mobile ? Firefox Android Soporte completo SiOpera Android ? Safari iOS ? Samsung Internet Android ?
device-width media featureChrome Soporte completo SiEdge ? Firefox Soporte completo SiIE ? Opera ? Safari ? WebView Android ? Chrome Android Soporte completo SiEdge Mobile ? Firefox Android Soporte completo SiOpera Android ? Safari iOS ? Samsung Internet Android ?
display-mode media featureChrome Soporte completo 46Edge Sin soporte NoFirefox Soporte completo 47
Notas
Soporte completo 47
Notas
Notas Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE ? Opera ? Safari ? WebView Android ? Chrome Android Soporte completo 46Edge Mobile Sin soporte NoFirefox Android Soporte completo 47
Notas
Soporte completo 47
Notas
Notas Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android ? Safari iOS ? Samsung Internet Android Sin soporte No
grid media featureChrome Soporte completo SiEdge ? Firefox Soporte completo SiIE ? Opera Soporte completo SiSafari Soporte completo SiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
height media featureChrome ? Edge ? Firefox ? IE Soporte completo 9Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
inverted-colors media feature
ExperimentalNo estándar
Chrome Sin soporte NoEdge ? Firefox Sin soporte NoIE Sin soporte NoOpera Sin soporte NoSafari Soporte completo SiWebView Android ? Chrome Android Sin soporte NoEdge Mobile ? Firefox Android Sin soporte NoOpera Android Sin soporte NoSafari iOS Soporte completo SiSamsung Internet Android ?
hover media featureChrome Soporte completo 38
Notas
Soporte completo 38
Notas
Notas Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge Soporte completo 12Firefox Soporte completo 64IE Sin soporte NoOpera Soporte completo 28Safari Soporte completo 9WebView Android ? Chrome Android Soporte completo 50Edge Mobile Soporte completo 12Firefox Android Soporte completo 64Opera Android Soporte completo 28Safari iOS Soporte completo 9.2Samsung Internet Android ?
light-level media feature
ExperimentalNo estándar
Chrome Sin soporte NoEdge ? Firefox Sin soporte NoIE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile ? Firefox Android Sin soporte NoOpera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android ?
monochrome media featureChrome Soporte completo SiEdge ? Firefox Soporte completo SiIE Sin soporte NoOpera Soporte completo SiSafari Soporte completo SiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
orientation media featureChrome Soporte completo SiEdge ? Firefox Soporte completo SiIE ? Opera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-block media feature
ExperimentalNo estándar
Chrome Sin soporte NoEdge ? Firefox Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android Sin soporte NoEdge Mobile ? Firefox Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-inline media feature
ExperimentalNo estándar
Chrome Sin soporte NoEdge ? Firefox Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1422235.
IE ? Opera ? Safari ? WebView Android ? Chrome Android Sin soporte NoEdge Mobile ? Firefox Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1422235.
Opera Android ? Safari iOS ? Samsung Internet Android ?
pointer media featureChrome Soporte completo 41Edge Soporte completo 12Firefox Soporte completo 64IE ? Opera Soporte completo 28Safari Soporte completo 9WebView Android ? Chrome Android Soporte completo 50Edge Mobile Soporte completo 12Firefox Android Soporte completo 64Opera Android Soporte completo 28Safari iOS Soporte completo 9.2Samsung Internet Android ?
prefers-reduced-motion media feature
Experimental
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 63IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 10.1WebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile Sin soporte NoFirefox Android Soporte completo 64Opera Android Sin soporte NoSafari iOS Soporte completo 10.3Samsung Internet Android ?
resolution media featureChrome Soporte completo 29Edge ? Firefox Soporte completo 8
Soporte completo 8
Soporte parcial 3.5
Notas
Notas Supports <integer> values only.
IE ? Opera Soporte completo SiSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
scan media featureChrome Sin soporte NoEdge ? Firefox Sin soporte NoIE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Sin soporte NoOpera Android ? Safari iOS ? Samsung Internet Android ?
scripting media feature
ExperimentalNo estándar
Chrome Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 489957.
Edge ? Firefox Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1166581.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 489957.
Chrome Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 489957.
Edge Mobile ? Firefox Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1166581.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android ?
update media feature
Experimental
Chrome Sin soporte NoEdge ? Firefox Sin soporte NoIE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
width media featureChrome Soporte completo SiEdge ? Firefox Soporte completo SiIE Soporte completo 9Opera Soporte completo SiSafari Soporte completo SiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-moz-device-pixel-ratio media feature
DeprecatedNo estándar
Chrome Sin soporte NoEdge ? Firefox Soporte completo 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-animation media feature
No estándar
Chrome Soporte completo SiEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-device-pixel-ratio media feature
No estándar
Chrome Soporte completo SiEdge ? Firefox Soporte completo 49
Notas Deshabilitado
Soporte completo 49
Notas Deshabilitado
Notas Implemented as an alias for for -moz-device-pixel-ratio.
Deshabilitado From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Soporte completo 45
Notas Deshabilitado
Notas Implemented as an alias for for -moz-device-pixel-ratio.
Deshabilitado From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo SiSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-max-device-pixel-ratio media feature
No estándar
Chrome Soporte completo SiEdge ? Firefox Soporte completo 49
Notas Deshabilitado
Soporte completo 49
Notas Deshabilitado
Notas Implemented as an alias for for max--moz-device-pixel-ratio.
Deshabilitado From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Soporte completo 45
Notas Deshabilitado
Notas Implemented as an alias for for max--moz-device-pixel-ratio.
Deshabilitado From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo SiSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-min-device-pixel-ratio media feature
No estándar
Chrome Soporte completo SiEdge ? Firefox Soporte completo 63
Notas
Soporte completo 63
Notas
Notas Implemented as an alias for for -moz-device-pixel-ratio.
Soporte completo 49
Notas Deshabilitado
Notas Implemented as an alias for for min--moz-device-pixel-ratio.
Deshabilitado From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Soporte completo 45
Notas Deshabilitado
Notas Implemented as an alias for for min--moz-device-pixel-ratio.
Deshabilitado From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo SiSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-2d media feature
No estándar
Chrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Soporte completo SiSafari Soporte completo 1WebView Android ? Chrome Android ? Edge Mobile Sin soporte NoFirefox Android Sin soporte NoOpera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-3d media feature
No estándar
Chrome Soporte completo SiEdge ? Firefox Soporte completo 49
Soporte completo 49
Soporte completo 46
Deshabilitado
Deshabilitado From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera Soporte completo SiSafari Soporte completo 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transition media feature
DeprecatedNo estándar
Chrome Sin soporte NoEdge ? Firefox Sin soporte NoIE ? Opera Soporte completo SiSafari Soporte completo 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
No estandar . Esperar poco soporte entre navegadores.
No estandar . Esperar poco soporte entre navegadores.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Ver también

  • Use @ apoya para aplicar estilos que dependen del soporte del navegador para varias tecnologías CSS.

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, mikelmg
Última actualización por: mdnwebdocs-bot,