path: root/files/pt-br/web/css/media_queries/using_media_queries/index.html

---
title: Usando Media Queries
slug: Web/CSS/Media_Queries/Using_media_queries
tags:
  - CSS
  - Desenho Responsivo
  - Design Responsivo
translation_of: Web/CSS/Media_Queries/Using_media_queries
original_slug: Web/Guide/CSS/CSS_Media_queries
---
<p>Uma <strong>media query</strong> consiste de um <em>media type </em>e pelo menos uma expressão que limita o escopo das folhas de estilo usando <em>media features</em>, tal como largura, altura e cor. <em>Media queries</em>, adicionadas no<span class="seoSummary"> <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, </span>deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<p><em>Media queries</em> consistem de um <em><a href="en-US/docs/Web/CSS/@media">media type</a></em> e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em <em>media features</em>, que determinam ou verdadeiro ou falso. Os resultados da <em>query</em> são verdadeiros se o <em>media type</em> especificado na <em>media query</em> corresponde ao tipo do documento exibido no dispositivo e todas as expressões na <em>media query</em> são verdadeiras.</p>

<pre class="brush: html">&lt;!-- CSS media query em um elemento de link --&gt;
&lt;link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;

&lt;!-- CSS media query dentro de um stylesheet --&gt;

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

<p>Quando uma <em>media query</em> é 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 <em>media queries</em> ligadas a tag &lt;link&gt; <a href="http://scottjehl.github.com/CSS-Download-Tests/">vão fazer download</a> mesmo se suas <em>medias queries</em> retornarem falso (eles não se aplicam, no entanto).</p>

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

<h3 id="Operadores_lógicos">Operadores lógicos</h3>

<p>Você pode compor <em>media queries</em> complexos usando operadores lógicos, incluindo <code>not</code>, <code>and</code>, e <code>only</code>. O operador <code>and</code> é usado para combinar múltiplas <em><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries$edit#Media_features">media features</a></em> em uma mesma <em>media query</em>, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a <em>query</em> seja verdadeiro. O operador <code>not</code> é usado para negar uma <em>media query</em> inteira. O operador <code>only</code> é usado para aplicar um estilo apenas se a <em>query</em> inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores <code>not</code> ou <code>only</code>, você tem que especificar um tipo de <em>media</em> explícito.</p>

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

<h4 id="and"><strong>and</strong></h4>

<p>A palavra-chave <code>and</code> é usada para combinar múltiplas <em>media features</em>, bem como combinar <em>media features</em> com <em>media types</em>. Uma <em>media query</em> básica, uma<em> media feature</em> simples com a <em>media type</em> <code>all</code>, pode parecer com isso:</p>

<pre class="brush: css">@media (min-width: 700px) { ... }</pre>

<p>Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador <code>and</code> para deixar todas as <em>media features</em> juntas.</p>

<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre>

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

<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre>

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

<h4 id="Listas_separadas_por_vírgula">Listas separadas por vírgula</h4>

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

<p>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:</p>

<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre>

<p>Acima, se eu estivesse em um dispositivo <code>screen</code> com um <em>viewport</em> largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como <code>@media all and (min-width: 700px)</code> será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo <code>screen</code> iria falhar no <em>media type</em> <code>handheld</code> na segunda <em>media query</em>. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um <em>viewport</em> de largura de 500px, enquanto a primeira media query falha devido a largura do <em>viewport</em>, a segunda <em>media query</em> teria sucesso e assim o <em>media statement</em> retorna verdadeiro.</p>

<h4 id="not">not</h4>

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

<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... }
</pre>

<p>Isto significa que a <em>query</em> é avaliada assim:</p>

<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... }
</pre>

<p>... em vez disso:</p>

<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre>

<p>Um outro exemplo, veja a <em>media query</em> seguinte:</p>

<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color)
</pre>

<p>É avalida desta forma:</p>

<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre>

<h4 id="only">only</h4>

<p><span style="line-height: 21px;">A palavra chave </span><em><code style="font-size: 14px;">only</code></em><span style="line-height: 21px;"> previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:</span></p>

<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="example.css" /&gt;
</pre>

<h3 id="Pseudo-BNF">Pseudo-BNF</h3>

<pre>media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
  | &lt;expression&gt; [ and &lt;expression&gt; ]*
expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
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</pre>

<p><em>Media queries</em> são <em>case insensitive</em>.  <em>Media queries</em> envolvidas em <em>media types</em> desconhecidos serão sempre falsas.</p>

<div class="note"><strong>Nota:</strong> Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.</div>

<h2 id="Características_de_mídia">Características de mídia</h2>

<p>A maioria das <em>media features</em> 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  “&lt;” e “&gt;” , que entrem em conflito com HTML e XML. Se você usar uma <em>media feature</em> sem especificar um valor, a expressão retorna verdadeiro, se o valor da <em>feature</em> for diferente de zero.</p>

<div class="note"><strong>Nota:</strong> 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.</div>

<h3 id="cor">cor</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;color&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> sim</p>

<p>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.</p>

<div class="note"><strong>Nota:</strong> 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.</div>

<h4 id="Exemplos">Exemplos</h4>

<p>Aplicar uma folha de estilo a todos dispositivos:</p>

<pre class="brush: css">@media all and (color) { ... }
</pre>

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

<pre class="brush: css">@media all and (min-color: 4) { ... }
</pre>

<h3 id="color-index">color-index</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> Sim</p>

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

<h4 id="Exemplos_2">Exemplos</h4>

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

<pre class="brush: css">@media all and (color-index) { ... }
</pre>

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

<pre class="brush: html">&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
</pre>

<h3 id="aspect-ratio">aspect-ratio</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
 <strong>Aceita prefixos min/max:</strong> sim</p>

<p>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).</p>

<h4 id="Exemplo">Exemplo</h4>

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

<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre>

<p>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.</p>

<h3 id="device-aspect-ratio">device-aspect-ratio</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
 <strong>Aceita prefixos min/max:</strong> sim</p>

<p>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).</p>

<h4 id="Exemplo_2">Exemplo</h4>

<p>A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.</p>

<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>

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

<h3 id="device-height">device-height</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
 <strong>Aceita prefixos min/max:</strong> sim</p>

<p>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).</p>

<h4 id="Exemplo_3">Exemplo</h4>

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

<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" /&gt;
</pre>

<h3 id="device-width">device-width</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
 <strong>Aceita prefixos min/max:</strong> sim</p>

<p>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).</p>

<h4 id="Exemplo_4">Exemplo</h4>

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

<pre class="brush: html" style="font-size: 14px;">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;</pre>

<h3 id="grid">grid</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> todas<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

<p>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.</p>

<h4 id="Exemplo_5">Exemplo</h4>

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

<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... }
</pre>

<div class="note"><strong>Nota:</strong>  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.</div>

<h3 id="height">height</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
 <strong>Aceita prefixos min/max:</strong> yes</p>

<p>A característica <code>height</code> 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).</p>

<div class="note"><strong>Nota:</strong> 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 <code>width</code> e <code>height</code>.</div>

<h3 id="monochrome">monochrome</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> sim</p>

<p>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.</p>

<h4 id="Exemplos_3">Exemplos</h4>

<p>Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:</p>

<pre class="brush: css">@media all and (monochrome) { ... }
</pre>

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

<pre class="brush: css">@media all and (min-monochrome: 8) { ... }
</pre>

<h3 id="orientation">orientation</h3>

<p><strong>Valor:</strong> <code>landscape</code> | <code>portrait</code><br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

<p>Indica se o <em>viewport</em> é modo <em>landscape</em> (o visor é mais largo do que mais alto) ou <em>portrait</em> (o visor é mais alto do que mais largo).</p>

<h4 id="Exemplo_6">Exemplo</h4>

<p>Para aplicar a folha de estilo apenas em orientação <em>portrait</em>:</p>

<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre>

<div class="note"><strong>Nota: </strong>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.</div>

<h3 id="resolution">resolution</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
 <strong>Aceita prefixos min/max:</strong> sim</p>

<p>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).</p>

<h4 id="Exemplos_4">Exemplos</h4>

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

<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }
</pre>

<p>Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):</p>

<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre>

<h3 id="scan">scan</h3>

<p><strong>Valor:</strong> <code>progressive</code> | <code>interlace</code><br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/TV")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

<p>Descreve o processo de digitalização de dispositivos saída de televisão.</p>

<h4 id="Exemplo_7">Exemplo</h4>

<p>Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:</p>

<pre class="brush: css">@media tv and (scan: progressive) { ... }
</pre>

<h3 id="width">width</h3>

<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
 <strong>Aceita prefixos min/max:</strong> sim</p>

<p>A <em>media feature</em> <code>width </code>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).</p>

<p><strong>Nota:</strong><br>
 Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em <em>media queries </em>usando media features <code>width</code> e <code>height</code>.</p>

<h4 id="Exemplos_5">Exemplos</h4>

<p>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 <em>query</em>:</p>

<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
</pre>

<p>Essa <em>media query </em>especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.</p>

<pre class="brush: html">&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" /&gt;
</pre>

<p>Essa <em>query </em>especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:</p>

<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... }
</pre>

<h2 id="Especificação_da_Mozilla_para_mídias_características">Especificação da Mozilla para mídias características</h2>

<p>Mozilla oferece várias <em>media features</em> para específicos <em>Gecko</em> . Algumas dessas podem ser sugeridas como <em>media features</em> oficiais.</p>

<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

<p>Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong>no</p>

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

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

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

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&amp;16") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;number&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> sim</p>

<p>Dar o número de pixels do dispositivo por pixels do CSS.</p>

<div class="geckoVersionNote">
<p><strong>Não use este recurso. </strong></p>

<p>Em vez disso, use o recurso <em><code>resolution</code></em> com a unidade <code>dppx</code>.<br>
 <br>
 <code>-moz-device-pixel-ratio</code> pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e <code>-webkit-device-pixel-ratio</code> com navegadores baseados no WebKit que não suportam <code>dppx</code>.</p>

<p>Exemplo:</p>

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

<p>Veja este artigo <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG</a> para ccompatibilidade de boas práticas em relação a <em><code>resolution</code></em> e <em><code>dppx</code></em>.</p>
</div>

<div class="note"><strong>Nota</strong>: Esta <em>media feature</em> é também implementada pelo Webkit e pelo <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 para Windows Phone 8.1</a>como <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Os prefixos min e max implementados pelo Gecko são nomeados <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> e <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; mas os mesmos prefixos implementados pelo Webkit são chamados <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> e <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div>

<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p>

<p><strong>Valor:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

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

<ul>
 <li><code>windows-xp</code></li>
 <li><code>windows-vista</code></li>
 <li><code>windows-win7</code></li>
 <li><code>windows-win8</code></li>
</ul>

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

<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

<p>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.</p>

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

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

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

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

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

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

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

<p>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.</p>

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

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

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<h4 id="Exemplo_8">Exemplo</h4>

<p>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.</p>

<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

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

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

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

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

<p>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.</p>

<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>

<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p>

<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

<p>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.</p>

<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>

<p><strong>Valor:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br>
 <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
 <strong>Aceita prefixos min/max:</strong> não</p>

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

<ul>
 <li><code>aero</code></li>
 <li><code>luna-blue</code></li>
 <li><code>luna-olive</code></li>
 <li><code>luna-silver</code></li>
 <li><code>royale</code></li>
 <li><code>generic</code></li>
 <li><code>zune</code></li>
</ul>

<p>Isto é previsto para <em>skins</em> 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.</p>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{ CompatChrome("21") }}</td>
   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
   <td>{{ CompatIE("9.0") }}</td>
   <td>{{ CompatOpera("9") }}</td>
   <td>{{ CompatSafari("4") }}</td>
  </tr>
  <tr>
   <td>Grade</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }} (<code>grid</code> media type is not supported)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Resolução</td>
   <td>{{ CompatChrome("29") }}</td>
   <td>{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("&lt;integer&gt;")}} values;<br>
    {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("&lt;number&gt;")}} values, as per the spec.</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Scan</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }} (<code>tv</code> media type is not supported)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
 <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li>
 <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li>
 <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li>
 <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li>
</ul>