Umamedia query consiste de ummedia type e pelo menos uma expressão que limita o escopo das folhas de estilo usandomedia features, tal como largura, altura e cor.Media queries, adicionadas noCSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.

Sintaxe

Media queries consistem de ummedia type e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa emmedia features, que determinam ou verdadeiro ou falso. Os resultados daquery são verdadeiros se omedia type especificado namedia query corresponde ao tipo do documento exibido no dispositivo e todas as expressões namedia query são verdadeiras.

<!-- CSS media query em um elemento de link --><link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

/* CSS media query dentro de um stylesheet */@media (max-width: 600px) {  .facet_sidebar {    display: none;  }}

Quando umamedia query é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos commedia queries ligadas a tag <link>vão fazer download mesmo se suasmedias queries retornarem falso (eles não se aplicam, no entanto).

A menos que você use os operadoresnot ouonly, omedia type é opcional e o tipoall será implícito.

Operadores lógicos

Você pode compormedia queries complexos usando operadores lógicos, incluindonot,and, eonly. O operadorand é usado para combinar múltiplasmedia features em uma mesmamedia query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que aquery seja verdadeiro. O operadornot é usado para negar umamedia query inteira. O operadoronly é usado para aplicar um estilo apenas se aquery inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadoresnot ouonly, você tem que especificar um tipo demedia explícito.

Você também pode combinar múltiplasmedias queries em uma lista separadas por vírgulas, se qualquer uma dasmedia queries na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operadoror.

and

A palavra-chaveand é usada para combinar múltiplasmedia features, bem como combinarmedia features commedia types. Umamedia query básica, umamedia feature simples com amedia typeall, pode parecer com isso:

@media (min-width: 700px) { ... }

Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operadorand para deixar todas asmedia features juntas.

@media (min-width: 700px) and (orientation: landscape) { ... }

Agora, amedia query acima vai apenas retorna verdadeira se o viewport for 700px,wide ouwider e a tela estiver emlandscape. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão formedia type TV, você pode encadear essasfeatures com amedia type usando o operadorand.

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

Agora, amedia query acima vai ser aplicada apenas se amedia type for TV, oviewport for 700pxwide ouwider, e a tela estiver em paisagem.

Listas separadas por vírgula

Listas separadas por vírgulas comportam-se como o operadoror quando utilizadas emmedia queries. Quando utilizamosmedia queries com uma lista separada por vírgulas, se qualquermedia queries retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cadamedia query em um lista separa por vírgulas é tratada como umaquery individual, e qualquer operador aplica em umamedia query não afeta os outros. Isto significa quemedia queries separadas por vírgulas podem ter objetivos diferentes demediafeatures,types estates.

Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Acima, se eu estivesse em um dispositivoscreen com umviewport largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como@media all and (min-width: 700px) será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivoscreen iria falhar nomedia typehandheld na segundamedia query. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com umviewport de largura de 500px, enquanto a primeira media query falha devido a largura doviewport, a segundamedia query teria sucesso e assim omedia statement retorna verdadeiro.

not

A palavra chavenot se aplica em toda amedia query e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com ummin-width: 700px recurso consultado). Um not vai apenas negar amedia query que é aplicada, de modo não toda amedia query que apresente umamedia querie com uma lista separada por vírgulas. A palavra chavenot não pode ser usada para negar uma característica individual daquery, apenas umamedia query inteira. Por exemplo, onot é avaliado por último naquery seguinte:

@media not all and (monochrome) { ... }

Isto significa que aquery é avaliada assim:

@media not (all and (monochrome)) { ... }

... em vez disso:

@media (not all) and (monochrome) { ... }

Um outro exemplo, veja amedia query seguinte:

@media not screen and (color), print and (color) { ... }

É avalida desta forma:

@media (not (screen and (color))), print and (color) { ... }

only

A palavra chaveonly previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Pseudo-BNF

media_query_list: <media_query> [, <media_query> ]*media_query: [[only | not]? <media_type> [ and <expression> ]*]  | <expression> [ and <expression> ]*expression: ( <media_feature> [: <value>]? )media_type: all | aural | braille | handheld | print |  projection | screen | tty | tv | embossedmedia_feature: width | min-width | max-width  | height | min-height | max-height  | device-width | min-device-width | max-device-width  | device-height | min-device-height | max-device-height  | aspect-ratio | min-aspect-ratio | max-aspect-ratio  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio  | color | min-color | max-color  | color-index | min-color-index | max-color-index  | monochrome | min-monochrome | max-monochrome  | resolution | min-resolution | max-resolution  | scan | grid

Media queries sãocase insensitive.Media queries envolvidas emmedia types desconhecidos serão sempre falsas.

Características de mídia

A maioria dasmedia features podem ter prefixo "min-" ou "max-" para expressar as restrições "maior ou igual" ou "menor ou igual". Isto evita o uso dos símbolos "<" e ">" , que entrem em conflito com HTML e XML. Se você usar umamedia feature sem especificar um valor, a expressão retorna verdadeiro, se o valor dafeature for diferente de zero.

cor

Valor:<color>Mídia:VisualAceita prefixos min/max: sim

Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.

Exemplos

Aplicar uma folha de estilo a todos dispositivos:

@media all and (color) { ... }

Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:

@media all and (min-color: 4) { ... }

color-index

Valor:<integer>Mídia:VisualAceita prefixos min/max: Sim

Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.

Exemplos

Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:

@media all and (color-index) { ... }

Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:

<link  rel="stylesheet"  media="all and (min-color-index: 256)"  href="http://foo.bar.com/stylesheet.css" />

aspect-ratio

Valor:<ratio>Mídia:Visual,TactileAceita prefixos min/max: sim

Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra ("/"). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).

Exemplo

A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.

@media screen and (min-aspect-ratio: 1/1) { ... }

Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.

device-aspect-ratio

Valor:<ratio>Mídia:Visual,TactileAceita prefixos min/max: sim

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra ("/"). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).

Exemplo

A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.

device-height

Valor:<length>Mídia:Visual,TactileAceita prefixos min/max: sim

Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

Exemplo

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:

<link rel="stylesheet" media="screen and (max-device-height: 799px)" />

device-width

Valor:<length>Mídia:Visual,TactileAceita prefixos min/max: sim

Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).

Exemplo

Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

grid

Valor:<integer>Mídia: todasAceita prefixos min/max: não

Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.

Exemplo

Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:

@media handheld and (grid) and (max-width: 15em) { ... }

height

Valor:<length>Mídia:Visual,TactileAceita prefixos min/max: yes

A característicaheight descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).

monochrome

Valor:<integer>Mídia:VisualAceita prefixos min/max: sim

Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.

Exemplos

Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:

@media all and (monochrome) { ... }

Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:

@media all and (min-monochrome: 8) { ... }

orientation

Valor:landscape |portraitMídia:VisualAceita prefixos min/max: não

Indica se oviewport é modolandscape (o visor é mais largo do que mais alto) ouportrait (o visor é mais alto do que mais largo).

Exemplo

Para aplicar a folha de estilo apenas em orientaçãoportrait:

@media all and (orientation: portrait) { ... }

resolution

Valor:<resolution>Mídia:bitmapAceita prefixos min/max: sim

Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).

Exemplos

Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:

@media print and (min-resolution: 300dpi) { ... }

Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):

@media screen and (min-resolution: 2dppx) { ... }

scan

Valor:progressive |interlaceMídia:TVAceita prefixos min/max: não

Descreve o processo de digitalização de dispositivos saída de televisão.

Exemplo

Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:

@media tv and (scan: progressive) { ... }

width

Valor:<length>Mídia:Visual,TactileAceita prefixos min/max: sim

Amedia featurewidth descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).

Nota:Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado emmedia queries usando media featureswidth eheight.

Exemplos

Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essaquery:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

Essamedia query especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.

<link  rel="stylesheet"  media="print and (min-width: 8.5in)"  href="http://foo.com/mystyle.css" />

Essaquery especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:

@media screen and (min-width: 500px) and (max-width: 800px) { ... }

Especificação da Mozilla para mídias características

Mozilla oferece váriasmedia features para específicosGecko . Algumas dessas podem ser sugeridas comomedia features oficiais.

-moz-images-in-menus

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao:-moz-system-metric(images-in-menus) CSSpseudo-class.

-moz-mac-graphite-theme

Valor:<integer>Mídia:Visual**Aceita prefixos min/max:**no

Se o usuário tenha configurado seu dispositivo para usar a aparência"Graphite" noMac OS X, o valor é 1. Se o usuário está usando a aparência padrãoblue, ou não está numMac OS X, o valor é 0.

Isto corresponde ao:-moz-system-metric(mac-graphite-theme) CSSpseudo-class.

-moz-maemo-classic

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

Se o usuário está usandoMaemo com o tema original, o valor é 1; Se está usando o mais novo temaFremantle, o valor é 0.

Isto corresponde ao:-moz-system-metric(maemo-classic) CSSpseudo-class.

-moz-device-pixel-ratio

Valor:<number>Mídia:VisualAceita prefixos min/max: sim

Dar o número de pixels do dispositivo por pixels do CSS.

Não use este recurso.

Em vez disso, use o recursoresolution com a unidadedppx.

-moz-device-pixel-ratio pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e-webkit-device-pixel-ratio com navegadores baseados no WebKit que não suportamdppx.

Exemplo:

@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */       (min--moz-device-pixel-ratio: 2),    /* Navegadores mais antigos do Firefox (antes do Firefox 16) */       (min-resolution: 2dppx),             /* Forma padrão */       (min-resolution: 192dpi)             /* dppx fallback */

Veja este artigoCSSWG para ccompatibilidade de boas práticas em relação aresolution edppx.

-moz-os-version

Valor:windows-xp |windows-vista |windows-win7 |windows-win8Mídia:VisualAceita prefixos min/max: não

Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:

• windows-xp
• windows-vista
• windows-win7
• windows-win8

Isto é fornecido pelasskins das aplicações e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.

-moz-scrollbar-end-backward

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.

Isto corresponde ao:-moz-system-metric(scrollbar-end-backward) CSSpseudo-class.

-moz-scrollbar-end-forward

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

Isto corresponde ao:-moz-system-metric(scrollbar-end-forward) CSSpseudo-class.

-moz-scrollbar-start-backward

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

Isto corresponde ao:-moz-system-metric(scrollbar-start-backward) CSSpseudo-class.

-moz-scrollbar-start-forward

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

Isto corresponde ao:-moz-system-metric(scrollbar-start-forward) CSSpseudo-class.

-moz-scrollbar-thumb-proportional

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

Isto corresponde ao:-moz-system-metric(scrollbar-thumb-proportional) CSSpseudo-class.

-moz-touch-enabled

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

Isto corresponde ao:-moz-system-metric(touch-enabled) CSSpseudo-class.

Exemplo

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

-moz-windows-classic

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

Isto corresponde ao:-moz-system-metric(windows-classic) CSSpseudo-class.

-moz-windows-compositor

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

Isto corresponde ao:-moz-system-metric(windows-compositor) CSSpseudo-class.

-moz-windows-default-theme

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

Isto corresponde ao:-moz-system-metric(windows-default-theme) CSSpseudo-class.

-moz-windows-glass

Valor:<integer>Mídia:VisualAceita prefixos min/max: não

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

-moz-windows-theme

Valor:aero |luna-blue |luna-olive |luna-silver |royale |generic |zuneMídia:VisualAceita prefixos min/max: não

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

• aero
• luna-blue
• luna-olive
• luna-silver
• royale
• generic
• zune

Isto é previsto paraskins de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.

See also

• CSS 3 media query specification
• Media types
• Using media queries from code
• List of mobile and tablet viewport sizes with pixel ratios and physical sizes
• CSS Animations Between Media Queries by David Walsh