@media

  • Revision slug: CSS/@media
  • Revision title: @media
  • Revision id: 184571
  • Created:
  • Creator: Verruckt
  • Is current revision? Não
  • コメント /* Grupos de mídia */

Revision Content

{{template.CSSRef()}}

Resumo

@media especifica o alvo de tipos de mídia (separado por vírgulas) de uma configuração de regras (delimitadas por chaves, {}).

Sintaxe

@media <tipos de mídia> {
  /* media-specific rules */
}

Tipos de mídia

all
Apropriado para todos os dispositivos.
braille
Pretendido para realimentação de dispositivos táteis para braille.
embossed
Pretendido para impressoras braille paginadas.
handheld
Pretendido para dispositivos handheld (tipicamente tela pequena, banda limitada).
print
Pretendido para material paginado e para documentos visualizados na tela em modo de previsão de impressão. Por favor consulte a seção em mídia paginada para informações sobre formatação de edições que são específicos para mídias paginadas.
projection
Pretendido para apresentações projetadas, por exemplo projetores. Por favor consulte a seção em mídia paginada para informações sobre formatação de edições que são especificas para mídias paginadas.
screen
Pretendido primariamente para computadores de tela colorida.
speech
Pretendido para sintetizadores de fala. Nota: CSS2 tem um tipo de mídia similar chamado 'aural' para esta proposta. Veja o apêndice em folhas de estilo aural para detalhes.
tty
Pretendido para mídia usando uma grade de caracteres fixed-pitch (como em teletipos, terminais, ou dispositivos portáteis com capacidades limitadas de exibição). Autores não devem usar unidades de pixel com o tipo de mídia "tty".
tv
Pretendido para dispositivos tipo televisão (baixa resolução, cor, telas com rolagem limitada, som disponível).

Grupos de mídia

Tipos de mídia são também parte de diferentes grupos de mídia. A seguinte tabela indica que tipos estão em cada grupo.

  Grupos
Tipos continuous paged visual audio speech tactile grid bitmap interactive static
braille X         X X   X X
embossed   X       X X     X
handheld X X X X X   X X X X
print   X X         X   X
projection   X X         X X  
screen X   X X       X X X
speech X       X       X X
tty X   X       X   X X
tv X X X X       X X X

Exemplos

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

Notas

Um tipo de mídia multimodal é ainda somente um tipo de mídia. O tipo de mídia 'tv', por exemplo, é um tipo de mídia multimodal que renderiza ambos visual e áudio para uma única tela.

Especificações

Compatibilidade com navegadores

Veja também

{{template.Cssxref("@import")}}, {{template.Cssxref("@font-face")}}

Categorias

Interwiki Language Links

{{ wiki.languages( { "en": "en/CSS/@media", "fr": "fr/CSS/@media", "pl": "pl/CSS/@media" } ) }}

Revision Source

<p>
{{template.CSSRef()}}
</p>
<h3 name="Resumo"> Resumo </h3>
<p><code>@media</code> especifica o alvo de tipos de mídia (separado por vírgulas) de uma configuração de regras (delimitadas por chaves, {}).
</p>
<h3 name="Sintaxe"> Sintaxe </h3>
<pre class="eval">@media <i>&lt;tipos de mídia&gt;</i> {
  /* media-specific rules */
}
</pre>
<h3 name="Tipos_de_m.C3.ADdia"> Tipos de mídia </h3>
<dl><dt>all
</dt><dd>Apropriado para todos os dispositivos.
</dd><dt>braille
</dt><dd>Pretendido para realimentação de dispositivos táteis para braille.
</dd><dt>embossed
</dt><dd>Pretendido para impressoras braille paginadas.
</dd><dt>handheld
</dt><dd>Pretendido para dispositivos <i>handheld</i> (tipicamente tela pequena, banda limitada).
</dd><dt>print
</dt><dd>Pretendido para material paginado e para documentos visualizados na tela em modo de previsão de impressão. Por favor consulte a seção em mídia paginada para informações sobre formatação de edições que são específicos para mídias paginadas.
</dd><dt>projection
</dt><dd>Pretendido para apresentações projetadas, por exemplo projetores. Por favor consulte a seção em mídia paginada para informações sobre formatação de edições que são especificas para mídias paginadas.
</dd><dt>screen
</dt><dd>Pretendido primariamente para computadores de tela colorida.
</dd><dt>speech
</dt><dd>Pretendido para sintetizadores de fala. Nota: CSS2 tem um tipo de mídia similar chamado 'aural' para esta proposta. Veja o apêndice em folhas de estilo aural para detalhes.
</dd><dt>tty
</dt><dd>Pretendido para mídia usando uma grade de caracteres <i>fixed-pitch</i> (como em teletipos, terminais, ou dispositivos portáteis com capacidades limitadas de exibição). Autores não devem usar unidades de pixel com o tipo de mídia "tty".
</dd><dt>tv
</dt><dd>Pretendido para dispositivos tipo televisão (baixa resolução, cor, telas com rolagem limitada, som disponível).
</dd></dl>
<h3 name="Grupos_de_m.C3.ADdia"> Grupos de mídia </h3>
<p>Tipos de mídia são também parte de diferentes grupos de mídia. A seguinte tabela indica que tipos estão em cada grupo.
</p>
<table class="standard-table">

<tbody><tr>
<td> 
</td><td class="header" colspan="10" style="text-align:center">Grupos
</td></tr>

<tr>
<td class="header">Tipos
</td><td class="header">continuous
</td><td class="header">paged
</td><td class="header">visual
</td><td class="header">audio
</td><td class="header">speech
</td><td class="header">tactile
</td><td class="header">grid
</td><td class="header">bitmap
</td><td class="header">interactive
</td><td class="header">static
</td></tr>

<tr>
<td class="header">braille
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td>X
</td><td>X
</td></tr>

<tr>
<td class="header">embossed
</td><td> 
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td>X
</td></tr>

<tr>
<td class="header">handheld
</td><td>X
</td><td>X
</td><td>X
</td><td>X
</td><td>X
</td><td> 
</td><td>X
</td><td>X
</td><td>X
</td><td>X
</td></tr>

<tr>
<td class="header">print
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td> 
</td><td>X
</td></tr>

<tr>
<td class="header">projection
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td></tr>

<tr>
<td class="header">screen
</td><td>X
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td>X
</td></tr>

<tr>
<td class="header">speech
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td></tr>

<tr>
<td class="header">tty
</td><td>X
</td><td> 
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td> 
</td><td>X
</td><td>X
</td></tr>

<tr>
<td class="header">tv
</td><td>X
</td><td>X
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td>X
</td></tr>
</tbody></table>
<h3 name="Exemplos"> Exemplos </h3>
<pre>  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }
</pre>
<h3 name="Notas"> Notas </h3>
<p>Um tipo de mídia multimodal é ainda somente um tipo de mídia. O tipo de mídia 'tv', por exemplo, é um tipo de mídia multimodal que renderiza ambos visual e áudio para uma única tela.
</p>
<h3 name="Especifica.C3.A7.C3.B5es"> Especificações </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/media.html#at-media-rule">CSS 2.1</a>
</li></ul>
<h3 name="Compatibilidade_com_navegadores"> Compatibilidade com navegadores </h3>
<h3 name="Veja_tamb.C3.A9m"> Veja também </h3>
<p>{{template.Cssxref("@import")}}, {{template.Cssxref("@font-face")}}
</p><p><span class="comment">Categorias</span>
</p><p><span class="comment">Interwiki Language Links</span>
</p>{{ wiki.languages( { "en": "en/CSS/@media", "fr": "fr/CSS/@media", "pl": "pl/CSS/@media" } ) }}
Revert to this revision