Consultas de média

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

Consultas de média permitem adaptar o seu site ou aplicação de acordo com diferentes características ou parâmetros dos dispositivos utilizados.

São um elemento chave de desenho adaptável . Por exemplo, uma consulta de média pode reduzir o tamanho do texto em dispositivos pequenos, aumentar o espaço entre parágrafos quando a página é visualizada em modo de paisagem, ou ampliar os botões nos ecrãs táteis.

Em CSS, utiliza-se a regra "at" @media para aplicar, condicionalmente, parte de uma folha de estilos com base no resultado de uma consulta de média. E utiliza-se @import para aplicar, condicionalmente, uma folha de estilos inteira.

Consultas de média em HTML

Em HTML, as consultas de média podem-se aplicar a vários elementos:

  • No atributo media do elemento <link>. O valor deste atributo define os média a que se deve aplicar o recurso ligado (tipicamente, este recurso é um documento CSS).
  • No atributo media do elemento <source> (apenas é válido quando este elemento está aninhado dentro de um elemento <picture>.). O valor deste atributo define quais os média que podem utilizar a imagem associada ao elemento.
  • No atributo media do elemento <style>. O valor deste atributo define os média a que são aplicados os estilos.

Consultas de média em JavaScript

Em JavaScript, pode-se usar o método Window.matchMedia() para verificar se a janela possui as características definidas na consulta de média. Também se pode utilizar MediaQueryList.addListener() para gerar eventos sempre que houver mudanças no resultado da consulta de média. Com estas funcionalidades, o seu site ou aplicação pode responder a mudanças na configuração, orientação ou estado do dispositivo.

Pode aprender mais sobre utilização programática das consultas de média no artigo Testar consultas de média.

Referências

Regras "at"

Guias

Utilizar consultas de média
Introdução às consultas de média, a sua sintaxe, os operadores e funcionalidades utilizadas para construir as expressões das consultas de média.
Testar consultas de média programaticamente
Descrição de como utilizar consultas de média no código JavaScript code para determinar o estado do dispositivo, e como instalar listeners que notificam o código quando o resultado das consultas muda (por exemplo, quando o utilizador roda o ecrã ou redimensiona a janela do navegador).
Utilizar Consultas de média para Acessibilidade
Este artigo explica de que forma as consultas de média podem ajudar os utilizadores a compreender melhor o seu site.

Especificações

Specification Status Comment
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 Definição inicial

Compatibilidade com navegadores

@media rule

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@mediaChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
any-hover media featureChrome Full support 41Edge Full support 16Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0
any-pointer media featureChrome Full support 41Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 4.0
aspect-ratio media featureChrome Full support 3Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support YesSafari Full support 4.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 4.2Samsung Internet Android Full support 1.0
calc() expressionsChrome Full support 66Edge No support NoFirefox Full support 59IE No support NoOpera Full support 53Safari Full support 12WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 59Opera Android Full support 47Safari iOS Full support 12Samsung Internet Android Full support 9.0
color media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
color-gamut media featureChrome Full support 58Edge No support NoFirefox No support NoIE No support NoOpera Full support 45Safari Full support 10WebView Android Full support 58Chrome Android Full support 58Firefox Android No support NoOpera Android Full support 43Safari iOS Full support 10Samsung Internet Android Full support 7.0
color-index media feature
Non-standard
Chrome Full support 29Edge No support NoFirefox No support NoIE No support NoOpera Full support 16Safari Full support 8WebView Android Full support ≤37Chrome Android Full support 29Firefox Android No support NoOpera Android Full support 16Safari iOS Full support 8Samsung Internet Android Full support 2.0
device-aspect-ratio media feature
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
device-height media feature
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
device-width media feature
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
display-mode media featureChrome Full support 45Edge No support NoFirefox Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE No support NoOpera Full support 32Safari Full support 13WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android Full support 32Safari iOS Full support 13Samsung Internet Android Full support 5.0
grid media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 10Opera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
height media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
hover media featureChrome Full support 38
Notes
Full support 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 38
Notes
Full support 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Chrome Android Full support 50Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0
inverted-colors media feature
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 10Samsung Internet Android No support No
light-level media feature
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Media feature expressionsChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0
Media query value supportChrome Full support 66Edge No support NoFirefox Full support 59IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 59Opera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
monochrome media featureChrome Full support 1Edge No support NoFirefox Full support 2IE No support NoOpera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
orientation media featureChrome Full support 3Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 4.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 4.2Samsung Internet Android Full support 1.0
overflow-block media feature
Experimental
Chrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
overflow-inline media feature
Experimental
Chrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
pointer media featureChrome Full support 41Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 50Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0
prefers-color-scheme media feature
Experimental
Chrome Full support 76Edge No support NoFirefox Full support 67IE No support NoOpera No support NoSafari Full support 12.1WebView Android Full support 76Chrome Android Full support 76Firefox Android Full support 67Opera Android No support NoSafari iOS Full support 13Samsung Internet Android No support No
prefers-reduced-motion media feature
Experimental
Chrome Full support 74Edge No support NoFirefox Full support 63IE No support NoOpera Full support 62Safari Full support 10.1WebView Android Full support 74Chrome Android Full support 74Firefox Android Full support 64Opera Android Full support 53Safari iOS Full support 10.3Samsung Internet Android No support No
resolution media featureChrome Full support 29Edge Full support 12Firefox Full support 8
Full support 8
Partial support 3.5
Notes
Notes Supports <integer> values only.
IE Full support 9Opera Full support 16
Full support 16
No support 10 — 15
Safari No support No
Notes
No support No
Notes
Notes See bug 78087.
WebView Android Full support ≤37Chrome Android Full support 29Firefox Android Full support 8
Full support 8
Partial support 4
Notes
Notes Supports <integer> values only.
Opera Android Full support 16
Full support 16
No support 10.1 — 14
Safari iOS No support No
Notes
No support No
Notes
Notes See bug 78087.
Samsung Internet Android Full support 2.0
scan media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android No support No
scripting media feature
ExperimentalNon-standard
Chrome No support No
Notes
No support No
Notes
Notes See bug 489957.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1166581.
IE No support NoOpera No support NoSafari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1166581.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Notes
No support No
Notes
Notes See bug 489957.
speech media typeChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera Full support 9.2Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android Full support 10.1Safari iOS No support NoSamsung Internet Android No support No
update media feature
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android No support No
width media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
-moz-device-pixel-ratio media feature
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 4IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
-webkit-animation media feature
DeprecatedNon-standard
Chrome No support 2 — 36Edge No support NoFirefox No support NoIE No support NoOpera No support ? — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support ? — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0
-webkit-device-pixel-ratio media feature
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled 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.
Full support 45
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled 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 No support NoOpera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled 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.
Full support 45
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled 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.
Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
-webkit-max-device-pixel-ratio media feature
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled 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.
Full support 45
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled 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 No support NoOpera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled 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.
Full support 45
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled 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.
Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
-webkit-min-device-pixel-ratio media feature
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled 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.
Full support 45
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled 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 No support NoOpera Full support YesSafari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled 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.
Full support 45
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled 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.
Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
-webkit-transform-2d media feature
Non-standard
Chrome No support 2 — 36Edge No support NoFirefox No support NoIE No support NoOpera No support ? — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support ? — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0
-webkit-transform-3d media feature
Non-standard
Chrome No support 2 — 36Edge Full support 12Firefox Full support 49
Full support 49
Full support 46
Disabled
Disabled 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 No support NoOpera No support ? — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android Full support 49
Full support 49
Full support 46
Disabled
Disabled 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.
Opera Android No support ? — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0
-webkit-transition media feature
DeprecatedNon-standard
Chrome No support 2 — 36Edge No support NoFirefox No support NoIE No support NoOpera No support ? — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support ? — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Ver também

  • A regra @supports permite aplicar estilos em função da compatibilidade do navegador com diversas tecnologias CSS.