Usando Media Queries

Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor. Media queries, adicionadas no CSS3, 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 um media type e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em media features, que determinam ou verdadeiro ou falso. Os resultados da query são verdadeiros se o media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media 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 -->

<style>
@media (max-width: 600px) 
{
  .facet_sidebar 
   {
    display: none;
   }
}
</style>

Quando uma media 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 com media queries ligadas a tag <link> vão fazer download mesmo se suas medias queries retornarem falso (eles não se aplicam, no entanto).

A menos que você use os operadores not ou only, o media type é opcional e o tipo all será implícito.

Operadores lógicos

Você pode compor media queries complexos usando operadores lógicos, incluindo not, and, e only. O operador and é usado para combinar múltiplas media features em uma mesma media query, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a query seja verdadeiro. O operador not é usado para negar uma media query inteira. O operador only é usado para aplicar um estilo apenas se a query inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores not ou only, você tem que especificar um tipo de media explícito.

Você também pode combinar múltiplas medias queries em uma  lista separadas por vírgulas, se qualquer uma das media queries na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.

and

A palavra-chave and é usada para combinar múltiplas media features, bem como combinar media features com media types. Uma media query básica, uma media feature simples com a media type all, 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 operador and para deixar todas as media features juntas.

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

Agora, a media query acima vai apenas retorna verdadeira se o viewport for 700px, wide ou wider e a tela estiver em landscape. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for media type TV, você pode encadear essas features com a media type usando o operador and.

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

Agora, a media query acima vai ser aplicada apenas se a media type for TV, o viewport for 700px wide ou wider, e a tela estiver em paisagem.

Listas separadas por vírgula

Listas separadas por vírgulas comportam-se como o operador or quando utilizadas em media queries. Quando utilizamos media queries com uma lista separada por vírgulas, se qualquer media queries retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada media query em um lista separa por vírgulas é tratada como uma query individual, e qualquer operador aplica em uma media query não afeta os outros. Isto significa que media queries separadas por vírgulas podem ter objetivos diferentes de media features, types e states.

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 dispositivo screen com um viewport 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 dispositivo screen iria falhar no media type handheld na segunda media query. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um viewport de largura de 500px, enquanto a primeira media query falha devido a largura do viewport, a segunda media query teria sucesso e assim o media statement retorna verdadeiro.

not

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

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

Isto significa que a query é avaliada assim:

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

... em vez disso:

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

Um outro exemplo, veja a media query seguinte:

@media not screen and (color), print and (color)

É avalida desta forma:

@media (not (screen and (color))), print and (color)

only

A palavra chave only 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 (para aqueles que gostam desse tipo de coisa)

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 | embossed
media_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ão case insensitive.  Media queries envolvidas em media types desconhecidos serão sempre falsas.

Características de mídia

A maioria das media 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 uma media feature sem especificar um valor, a expressão retorna verdadeiro, se o valor da feature for diferente de zero.

cor

Valor: <color>
Mídia: media/visual
Aceita 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: media/visual
Aceita prefixos min/max: yes

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="https://foo.bar.com/stylesheet.css" />

aspect-ratio

Valor: <ratio>
Mídia: media/visual, media/tactile
Aceita 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: media/visual, media/tactile
Aceita 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: media/visual, media/tactile
Aceita 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: media/visual, media/tactile
Aceita 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: todas
Aceita 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: media/visual, media/tactile
Aceita prefixos min/max: yes

A característica height 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: media/visual
Aceita 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 | portrait
Mídia: media/visual
Aceita prefixos min/max: não

Indica se o viewport é modo landscape (o visor é mais largo do que mais alto) ou portrait (o visor é mais alto do que mais largo).

Exemplo

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

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

resolution

Valor: <resolution>
Mídia: bitmap
Aceita 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 | interlace
Mídia: media/tv
Aceita 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: media/visual, media/tactile
Aceita prefixos min/max: sim

A media feature width 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 em media queries usando media features width e height.

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 essa query:

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

Essa media 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="https://foo.com/mystyle.css" />

Essa query 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árias media features para específicos Gecko . Algumas dessas podem ser sugeridas como media features oficiais.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-class.

Valor: <integer>
Mídia: media/visual
Aceita prefixos min/max:no

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

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

Valor: <integer>
Mídia: media/visual
Aceita prefixos min/max: não

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

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

Valor: <number>
Mídia: media/visual
Aceita prefixos min/max: sim

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

@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 */ 

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
Mídia: media/visual
Aceita 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 pelas skins 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.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-class.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-class.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-class.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-class.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-class.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-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.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-class.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-class.

Valor: <integer>
Mídia: media/visual
Aceita 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) CSS pseudo-class.

Valor: <integer>
Mídia: media/visual
Aceita 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.

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
Mídia: media/visual
Aceita 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 para skins 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.

Compatibilidade no navegador

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