CSS/Consulta_de_mídia

  • Revision slug: CSS/Consulta_de_mídia
  • Revision title: Consulta de mídia
  • Revision id: 270550
  • Created:
  • Creator: Verruckt
  • Is current revision? Não
  • コメント 939 words added

Revision Content

{{ gecko_minversion_header("1.9.1") }}

O CSS 3 aumenta o suporte a folhas de estilo dependentes de mídia deixando-as mais precisamente marcadas. Uma consulta de mídia consiste em um tipo de mídia e em último caso uma expressão que limita o escopo das folhas de estilo usando recursos de mídia, tais como largura, altura e cor. Consultas de mídia deixam a apresentação do conteúdo adaptar-se a uma faixa específica de dispositivos de saída sem ter que mudar o conteúdo.

Sintaxe

Consultas de mídia consistem em um tipo de mídia (en) e uma ou mais expressões envolvendo recursos de mídia, que decide entre verdadeiro ou falso. O resultado da consulta é verdadeiro se o tipo de mídia especificado na consulta de mídia encaixa com o tipo de dispositivo no qual o documento está sendo exibido e se todas as expressões na consulta de mídia forem verdadeiras.

Quando uma consulta de mídia é verdadeira, a folha de estilos correspondente é aplicada seguinto as regras normais de cascata.

Operadores lógicos

Você pode compor consultas de mídia complexas usando operadores locais, incluindo not, and, e only.

Além disso, você pode combinar múltiplas consultas de mídia em uma lista separada por vírgulas; se qualquer das consultas de mídia da lista for verdadeira, a folha de estilos associada é aplicada. Isto é equivalente ao operador lógico "or".

A palavra-chave not, nega o resultado para a consulta; "all and (not color)" é verdadeiro para dispositivos monocromáticos independente do tipo de mídia, por exemplo.

A palavra-chave only esconderá folhas de estilos de navegadores antigos que não suportem consultas de mídia:

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

Pseudo-BNF (para aqueles que gostam desde 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
  | 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

Consultas de mídia não diferenciam maiúsculas de minúsculas. Consultas de mídia que envolvem tipos de mídia desconhecidos são sempre falsas.

Nota: Os parênteses são requisitados a volta de expressões; esquecer de usá-los é um erro.

Recursos de mídia

A maioria dos recursos de mídia pode ser prefixado com "min-" ou "max-" para expressar "maior ou igual a" ou "menor ou igual a". Isto evita usar os símbolos "<" e ">", que poderiam conflitar com o HTML e o XML. Se você usa um recurso de mídia sem especificar um valor, a expressão é definida como verdadeira se o valor do recurso for diferente de zero.

Nota: Se um recurso de mídia não se aplica ao dispositivo no qual o navegador está sendo rodado, expressões envolvendo este recurso de mídia serão sempre falsas. Por exemplo, consultando a relação de aspecto de um dispositivo auditivo sempre resultará em falso.

color

Valor: {{ Xref_csscolorvalue() }}
Mídia: {{ Xref_cssvisual() }}
Aceita os prefixos min/max: sim

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

Nota: Se os componentes de cor tiverem diferentes de números de bits por componente de cor, o menor número é usado. Por exemplo, se uma tela usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo é considerado para usar 5 bits por componente de cor. Se o dispositivo usa cores indexadas, o número mínimo de bits por componente de cor na tabela de cores é usado.

Exemplos

Para aplicar uma folha de estilos a todos os dispositivos coloridos:

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

Para aplicar uma folha de estilos a dispositivos com no mínimo 4 bits por componente de cor:

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

color-index

Valor: integer
Mídia: {{ Xref_cssvisual() }}
Aceita os prefixos min/max: sim

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

Exemplos

Para indicar que uma folha de estilos deve ser aplicada a todos os dispositivos usando cores indexadas, você pode fazer:

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

Para aplicar uma folha de estilos a dispositivos de cores indexadas com no mínimo 256 cores:

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

device-aspect-ratio

Valor: integer / integer
Mídia: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Aceita os prefixos min/max: sim

Descreve a relação de aspecto do dispositivo de saída. Este valor consiste em dois positivos inteiros (integer) separados por um caractére barra ("/"). Isto representa o número de pixels horizontais sobre o número de pixels verticais.

Exemplo

O que vem a seguir selecionar uma folha de estilos especial para uso em dispositivos de tela comprida (widescreen):

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

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

device-height

Valor: {{ Xref_csslength() }}
Mídia: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Aceita os prefixos min/max: sim

Descreve a altura do dispositivo de saída (sendo a tela ou página inteira, ao invés de somente a área de renderização, como a janela do documento).

Exemplo

Para aplicar uma folha de estilos a um documento quando exibido em uma tela que for mais fina do que 800 pixels, você pode usar isto:

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

device-width

Valor: {{ Xref_csslength() }}
Mídia: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Aceita os prefixos min/max: sim

Descreve a largura do dispositivo de saída (sendo a tela ou a página inteira, ao invés de somente a área de renderização, como a janela do documento).

grid

Valor: integer
Mídia: all
Aceita os prefixos min/max: não

Determina Determines se o dispositivo de saída é um dispositivo grid ou um dispositivo bitmap. Se o dispositivo for baseado em grid (tal como um terminal tty ou uma tela de celular com somente uma fonte), o valor é 1. Caso contrário é zero.

Nota: Gecko (e consequentemente o Firefox) não suporta dispositivos grid atualmente, então este recurso de mídia não é suportado.

Exemplo

Para aplicar um estilo a dispositivos de mão com uma tela de 15 caracteres ou mais estreito:

@media handheld and (grid) and (max-width: 15em) { ... }
Nota: A unidade "em" tem um uso especial em dispositivos grid; desde que a largura exata de um "em" não pôde ser determinada, 1em é assumido como a largura de uma célula grid horizontal, e a altura de uma célula vertical.

height

Valor: {{ Xref_csslength() }}
Mídia: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Aceita os prefixos min/max: sim

O recurso de mídia height descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura da viewport ou da caixa de páginas em uma impressora).

Nota: Quando o usuário redimenciona a janela, o Firefox substituirá as folhas de estilos como for apropriado, baseado em consultas de mídia usando os recursos de mídia width e height.

monochrome

Valor: integer
Mídia: {{ Xref_cssvisual() }}
Aceita os prefixos min/max: sim

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

Exemplos

Para aplicar uma folha de estilos para todos os dispositivos monocromáticos:

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

Para aplicar uma folha de estilos para dispositivos monocromáticos com no mínimo 8 bits por pixel:

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

orientation

Valor: landscape | portrait
Mídia: {{ Xref_cssvisual() }}
Aceita os prefixos min/max: não

Indica se o dispositivo está em modo paisagem (a exibição é mais larga do que alta) ou retrato (a exibição é mais alta do que larga).

Exemplo

Para aplicar uma folha de estilos somente na orientação retrato:

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

resolution

Valor: {{ Xref_cssresolution() }}
Mídia: {{ Xref_cssbitmap() }}
Aceita os prefixos min/max: sim

Indica a resolução (densidade de pixels) do dispositivo de saída. A resolução pode ser especificada tanto em pontos por polegada (dpi) quanto pontos por centímetro (dpcm).

Exemplo

Para aplicar uma folha de estilos a dispositivos com no mínimo 300 pontos por polegada de resolução:

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

scan

Valor: progressiveinterlace
Mídia: {{ Xref_csstv() }}
Aceita os prefixos min/max: não

Descreve o processo de escaneamento de dispositivos de saída de televisão.

Nota: Gecko (e consequentemente o Firefox) não suportam o tipo de mídia tv atualmente, então este recurso de mídia não é suportado.

Exemplo

Para aplicar uma folha de estilos somente para televisões com escaneamento progressivo:

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

width

Valor: {{ Xref_csslength() }}
Mídia: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Aceita os prefixos min/max: sim

O recurso de mídia width descreve a largura da superfície de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de páginas em uma impressora).

Nota: Quando o usuário redimensiona a janela, o Firefox substituirá a folha de estilo como apropriado, baseado nas consultas de mídia usando os recursos de mídia width e height.

Exemplos

Se você desejar espeficar uma folha de estilos para dispositivos de mão, ou dispositivos de tela com uma largura maior do que 20em, você pode usar esta folha de estilos:

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

Este recurso de mídia especifica uma folha de estilos que deve ser aplicada a mídias impressas mais largas do que 8.5 polegadas:

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

Este recurso especifica uma folha de estilos que é usável quando a viewport estiver entre 500 e 800 pixels de largura:

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

Mozilla-specific media features

{{ gecko_minversion_header("1.9.2") }}

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.

-moz-images-in-menus

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo class.

-moz-mac-graphite-theme

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.

This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo class.

-moz-maemo-classic

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo class.

-moz-scrollbar-end-backward

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo class.

-moz-scrollbar-end-forward

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo class.

-moz-scrollbar-start-backward

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo class.

-moz-scrollbar-start-forward

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo class.

-moz-scrollbar-thumb-proportional

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays 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.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo class.

-moz-touch-enabled

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

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

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo class.

Example

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

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

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

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo class.

-moz-windows-compositor

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

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

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo class.

-moz-windows-default-theme

Value: integer
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

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.

Veja também

{{ languages( { "en": "en/CSS/Media_queries", "fr": "fr/CSS/Media_queries", "ja": "ja/CSS/Media_queries" } ) }}

Revision Source

<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>O CSS 3 aumenta o suporte a folhas de estilo dependentes de mídia deixando-as mais precisamente marcadas. Uma consulta de mídia consiste em um tipo de mídia e em último caso uma expressão que limita o escopo das folhas de estilo usando recursos de mídia, tais como largura, altura e cor. Consultas de mídia deixam a apresentação do conteúdo adaptar-se a uma faixa específica de dispositivos de saída sem ter que mudar o conteúdo.</p>
<h2>Sintaxe</h2>
<p>Consultas de mídia consistem em um <a class="internal" href="/en/CSS/@media" title="En/CSS/@media">tipo de mídia (en)</a> e uma ou mais expressões envolvendo recursos de mídia, que decide entre verdadeiro ou falso. O resultado da consulta é verdadeiro se o tipo de mídia especificado na consulta de mídia encaixa com o tipo de dispositivo no qual o documento está sendo exibido <strong>e</strong> se todas as expressões na consulta de mídia forem verdadeiras.</p>
<p>Quando uma consulta de mídia é verdadeira, a folha de estilos correspondente é aplicada seguinto as regras normais de cascata.</p>
<h3>Operadores lógicos</h3>
<p>Você pode compor consultas de mídia complexas usando operadores locais, incluindo <code>not</code>, <code>and</code>, e <code>only</code>.</p>
<p>Além disso, você pode combinar múltiplas consultas de mídia em uma lista separada por vírgulas; se qualquer das consultas de mídia da lista for verdadeira, a folha de estilos associada é aplicada. Isto é equivalente ao operador lógico "or".</p>
<p>A palavra-chave <code>not</code>, nega o resultado para a consulta; "<span style="font-family: monospace;">all</span><code> and (not color)</code>" é verdadeiro para dispositivos monocromáticos independente do tipo de mídia, por exemplo.</p>
<p>A palavra-chave <code>only</code> esconderá folhas de estilos de navegadores antigos que não suportem consultas de mídia:</p>
<pre>&lt;link rel="stylesheet" media="only screen and (color)" href="example.css" /&gt;
</pre>
<h3>Pseudo-BNF (para aqueles que gostam desde tipo de coisa)</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
  | 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>Consultas de mídia não diferenciam maiúsculas de minúsculas. Consultas de mídia que envolvem tipos de mídia desconhecidos são sempre falsas.</p>
<div class="note"><strong>Nota:</strong> Os parênteses são requisitados a volta de expressões; esquecer de usá-los é um erro.</div>
<h2>Recursos de mídia</h2>
<p>A maioria dos recursos de mídia pode ser prefixado com "min-" ou "max-" para expressar "maior ou igual a" ou "menor ou igual a". Isto evita usar os símbolos "&lt;" e "&gt;", que poderiam conflitar com o HTML e o XML. Se você usa um recurso de mídia sem especificar um valor, a expressão é definida como verdadeira se o valor do recurso for diferente de zero.</p>
<div class="note"><strong>Nota:</strong> Se um recurso de mídia não se aplica ao dispositivo no qual o navegador está sendo rodado, expressões envolvendo este recurso de mídia serão sempre falsas. Por exemplo, consultando a relação de aspecto de um dispositivo auditivo sempre resultará em falso.</div>
<h3>color</h3>
<p><strong>Valor:</strong> {{ Xref_csscolorvalue() }}<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Aceita os prefixos min/max:</strong> sim</p>
<p>Indica o número de bits por componente de cor do dispositivo de saída. Se o dispositivo não é colorido, este valor é zero.</p>
<div class="note"><strong>Nota:</strong> Se os componentes de cor tiverem diferentes de números de bits por componente de cor, o menor número é usado. Por exemplo, se uma tela usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo é considerado para usar 5 bits por componente de cor. Se o dispositivo usa cores indexadas, o número mínimo de bits por componente de cor na tabela de cores é usado.</div>
<h4>Exemplos</h4>
<p>Para aplicar uma folha de estilos a todos os dispositivos coloridos:</p>
<pre>@media all and (color) { ... }
</pre>
<p>Para aplicar uma folha de estilos a dispositivos com no mínimo 4 bits por componente de cor:</p>
<pre>@media all and (min-color: 4) { ... }
</pre>
<h3>color-index</h3>
<p><strong>Valor:</strong> integer<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Aceita os prefixos min/max:</strong> sim</p>
<p>Indica o número de entradas na tabela de cor para o dispositivo de saída.</p>
<h4>Exemplos</h4>
<p>Para indicar que uma folha de estilos deve ser aplicada a todos os dispositivos usando cores indexadas, você pode fazer:</p>
<pre>@media all and (color-index) { ... }
</pre>
<p>Para aplicar uma folha de estilos a dispositivos de cores indexadas com no mínimo 256 cores:</p>
<pre>&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
</pre>
<h3>device-aspect-ratio</h3>
<p><strong>Valor:</strong> integer / integer<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br>
<strong>Aceita os prefixos min/max:</strong> sim</p>
<p>Descreve a relação de aspecto do dispositivo de saída. Este valor consiste em dois positivos inteiros (integer) separados por um caractére barra ("/"). Isto representa o número de pixels horizontais sobre o número de pixels verticais.</p>
<h4>Exemplo</h4>
<p>O que vem a seguir selecionar uma folha de estilos especial para uso em dispositivos de tela comprida (widescreen):</p>
<pre>@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
<p>Isto seleciona o estilo quando a relação de aspecto for 16:9 ou 16:10.</p>
<h3>device-height</h3>
<p><strong>Valor:</strong> {{ Xref_csslength() }}<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br>
<strong>Aceita os prefixos min/max: </strong>sim</p>
<p>Descreve a altura do dispositivo de saída (sendo a tela ou página inteira, ao invés de somente a área de renderização, como a janela do documento).</p>
<h4>Exemplo</h4>
<p>Para aplicar uma folha de estilos a um documento quando exibido em uma tela que for mais fina do que 800 pixels, você pode usar isto:</p>
<pre>&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;
</pre>
<h3>device-width</h3>
<p><strong>Valor:</strong> {{ Xref_csslength() }}<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br>
<strong>Aceita os prefixos min/max:</strong> sim</p>
<p>Descreve a largura do dispositivo de saída (sendo a tela ou a página inteira, ao invés de somente a área de renderização, como a janela do documento).</p>
<h3>grid</h3>
<p><strong>Valor:</strong> integer<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> all<br>
<strong>Aceita os prefixos min/max:</strong> não</p>
<p>Determina Determines se o dispositivo de saída é um dispositivo <em>grid</em> ou um dispositivo bitmap. Se o dispositivo for baseado em <em>grid</em> (tal como um terminal tty ou uma tela de celular com somente uma fonte), o valor é 1. Caso contrário é zero.</p>
<div class="note"><strong>Nota:</strong> Gecko (e consequentemente o Firefox) não suporta dispositivos <em>grid</em> atualmente, então este recurso de mídia não é suportado.</div>
<h4>Exemplo</h4>
<p>Para aplicar um estilo a dispositivos de mão com uma tela de 15 caracteres ou mais estreito:</p>
<pre>@media handheld and (grid) and (max-width: 15em) { ... }
</pre>
<div class="note"><strong>Nota:</strong> A unidade "em" tem um uso especial em dispositivos <em>grid</em>; desde que a largura exata de um "em" não pôde ser determinada, 1em é assumido como a largura de uma célula <em>grid</em> horizontal, e a altura de uma célula vertical.</div>
<h3>height</h3>
<p><strong>Valor:</strong> {{ Xref_csslength() }}<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br>
<strong>Aceita os prefixos min/max:</strong> sim</p>
<p>O recurso de mídia <code>height</code> descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura da <em>viewport</em> ou da caixa de páginas em uma impressora).</p>
<div class="note"><strong>Nota:</strong> Quando o usuário redimenciona a janela, o Firefox substituirá as folhas de estilos como for apropriado, baseado em consultas de mídia usando os recursos de mídia <code>width</code> e <code>height</code>.</div>
<h3>monochrome</h3>
<p><strong>Valor:</strong> integer<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Aceita os prefixos min/max:</strong> sim</p>
<p>Indica o número de bits por pixel em um dispositivo monocromático (escala de cinza). Se o dispositivo não for monocromático, o valor do dispositivo é 0.</p>
<h4>Exemplos</h4>
<p>Para aplicar uma folha de estilos para todos os dispositivos monocromáticos:</p>
<pre>@media all and (monochrome) { ... }
</pre>
<p>Para aplicar uma folha de estilos para dispositivos monocromáticos com no mínimo 8 bits por pixel:</p>
<pre>@media all and (min-monochrome: 8) { ... }
</pre>
<h3>orientation</h3>
<p><strong>Valor:</strong> <code>landscape</code> | <code>portrait</code><br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Aceita os prefixos min/max:</strong> não</p>
<p>Indica se o dispositivo está em modo paisagem (a exibição é mais larga do que alta) ou retrato (a exibição é mais alta do que larga).</p>
<h4>Exemplo</h4>
<p>Para aplicar uma folha de estilos somente na orientação retrato:</p>
<pre>@media all and (orientation: portrait) { ... }</pre>
<h3>resolution</h3>
<p><strong>Valor:</strong> {{ Xref_cssresolution() }}<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssbitmap() }}<br>
<strong>Aceita os prefixos min/max:</strong> sim</p>
<p>Indica a resolução (densidade de pixels) do dispositivo de saída. A resolução pode ser especificada tanto em pontos por polegada (dpi) quanto pontos por centímetro (dpcm).</p>
<h4>Exemplo</h4>
<p>Para aplicar uma folha de estilos a dispositivos com no mínimo 300 pontos por polegada de resolução:</p>
<pre>@media print and (min-resolution: 300dpi) { ... }
</pre>
<h3>scan</h3>
<p><strong>Valor:</strong> <code>progressive</code> | <code>interlace</code><br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_csstv() }}<br>
<strong>Aceita os prefixos min/max:</strong> não</p>
<p>Descreve o processo de escaneamento de dispositivos de saída de televisão.</p>
<div class="note"><strong>Nota: </strong>Gecko (e consequentemente o Firefox) não suportam o tipo de mídia <code>tv</code> atualmente, então este recurso de mídia não é suportado.</div>
<h4>Exemplo</h4>
<p>Para aplicar uma folha de estilos somente para televisões com escaneamento progressivo:</p>
<pre>@media tv and (scan: progressive) { ... }
</pre>
<h3>width</h3>
<p><strong>Valor:</strong> {{ Xref_csslength() }}<br>
<span style="font-weight: bold;">Mídia</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br>
<strong>Aceita os prefixos min/max:</strong> sim</p>
<p>O recurso de mídia <code>width</code> descreve a largura da superfície de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de páginas em uma impressora).</p>
<div class="note"><strong>Nota: </strong>Quando o usuário redimensiona a janela, o Firefox substituirá a folha de estilo como apropriado, baseado nas consultas de mídia usando os recursos de mídia <code>width</code> e <code>height</code>.</div>
<h4>Exemplos</h4>
<p>Se você desejar espeficar uma folha de estilos para dispositivos de mão, ou dispositivos de tela com uma largura maior do que 20em, você pode usar esta folha de estilos:</p>
<pre>@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
</pre>
<p>Este recurso de mídia especifica uma folha de estilos que deve ser aplicada a mídias impressas mais largas do que 8.5 polegadas:</p>
<pre>&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" /&gt;
</pre>
<p>Este recurso especifica uma folha de estilos que é usável quando a <em>viewport</em> estiver entre 500 e 800 pixels de largura:</p>
<pre>@media screen and (min-width: 500px) and (max-width: 800px) { ... }
</pre>
<h2>Mozilla-specific media features</h2>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">{{ gecko_minversion_header("1.9.2") }}</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p>
<h3>-moz-images-in-menus</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo class.</p>
<h3>-moz-mac-graphite-theme</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo class.</p>
<h3>-moz-maemo-classic</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo class.</p>
<h3>-moz-scrollbar-end-backward</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo class.</p>
<h3>-moz-scrollbar-end-forward</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo class.</p>
<h3>-moz-scrollbar-start-backward</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo class.</p>
<h3>-moz-scrollbar-start-forward</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo class.</p>
<h3>-moz-scrollbar-thumb-proportional</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the device's user interface displays 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 style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo class.</p>
<h3>-moz-touch-enabled</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo class.</p>
<h4>Example</h4>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">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>
<h3>-moz-windows-classic</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo class.</p>
<h3>-moz-windows-compositor</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo class.</p>
<h3>-moz-windows-default-theme</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>Value:</strong> integer<br>
<span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br>
<strong>Accepts min/max prefixes:</strong> no</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">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>
<h2>Veja também</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a> (en)</li> <li><a class="internal" href="/en/CSS/@media" title="En/CSS/@media">Media types</a> (en)</li>
</ul>
<p>{{ languages( { "en": "en/CSS/Media_queries", "fr": "fr/CSS/Media_queries", "ja": "ja/CSS/Media_queries" } ) }}</p>
Revert to this revision