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 (en-US)* 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.


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



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


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:


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


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


```css
@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:


```css
@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:


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


Isto significa que a *query* é avaliada assim:


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


... em vez disso:


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


Um outro exemplo, veja a *media query* seguinte:


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


É avalida desta forma:


```css
@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:


```html
<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 | 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.

**Nota:** Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.

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.

**Nota:** Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.

### cor

**Valor:** `<color>`
**Mídia:** `Media/Visual` (en-US)
**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.

**Nota:** Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.

#### Exemplos

Aplicar uma folha de estilo a todos dispositivos:


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


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


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

### color-index

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**Aceita 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:


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


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


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

### aspect-ratio

**Valor:** `<ratio>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**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.


```css
@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>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**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.


```css
@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>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**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:


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

### device-width

**Valor:** `<length>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**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:


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

### grid

**Valor:** `<integer>` (en-US)
**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:


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


**Nota:** A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.

### height

**Valor:** `<length>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**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).

**Nota:** Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features `width` e `height`.

### monochrome

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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:


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


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


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

### orientation

**Valor:** `landscape` | `portrait`
**Mídia:** `Media/Visual` (en-US)
**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*:


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


**Nota:** Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.

### resolution

**Valor:** `<resolution>` (en-US)
**Mídia:** `bitmap` (en-US)
**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:


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


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


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

### scan

**Valor:** `progressive` | `interlace`
**Mídia:** `Media/TV` (en-US)
**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:


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

### width

**Valor:** `<length>` (en-US)
**Mídia:** `Media/Visual` (en-US), `Media/Tactile` (en-US)
**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*:


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


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


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


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

### -moz-images-in-menus

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-mac-graphite-theme

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
 \*\*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 (en-US).

### -moz-maemo-classic

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-device-pixel-ratio

**Valor:** `<number>`
**Mídia:** `Media/Visual` (en-US)
**Aceita 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 recurso *`resolution`* com a unidade `dppx`.

`-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 suportam `dppx`.

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 artigo CSSWG para ccompatibilidade de boas práticas em relação a *`resolution`* e *`dppx`*.

**Nota:** Esta *media feature* é também implementada pelo Webkit e pelo IE 11 para Windows Phone 8.1como -webkit-device-pixel-ratio. Os prefixos min e max implementados pelo Gecko são nomeados min--moz-device-pixel-ratio e max--moz-device-pixel-ratio; mas os mesmos prefixos implementados pelo Webkit são chamados -webkit-min-device-pixel-ratio e -webkit-max-device-pixel-ratio.

### -moz-os-version

**Valor:** `windows-xp` | `windows-vista` | `windows-win7` | `windows-win8`
**Mídia:** `Media/Visual` (en-US)
**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.

### -moz-scrollbar-end-backward

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-scrollbar-end-forward

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-scrollbar-start-backward

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-scrollbar-start-forward

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-scrollbar-thumb-proportional

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-touch-enabled

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

#### 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>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-windows-compositor

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-windows-default-theme

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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 (en-US).

### -moz-windows-glass

**Valor:** `<integer>` (en-US)
**Mídia:** `Media/Visual` (en-US)
**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.

### -moz-windows-theme

**Valor:** `aero` | `luna-blue` | `luna-olive` | `luna-silver` | `royale` | `generic` | `zune`
**Mídia:** `Media/Visual` (en-US)
**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.

See also
--------

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