Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1134203 of @media

  • Slug da revisão: Web/CSS/@media
  • Título da revisão: @media
  • ID da revisão: 1134203
  • Criado:
  • Autor: mansil
  • É a revisão atual? Não
  • Comentário
Etiquetas: 

Conteúdo da revisão

{{ CSSRef() }}

Resumo

A @media de CSS at-rule associa um conjunto de declarações integradas, num bloco CSS que é delimitado por parênteses curvos, com a condição definida pela conslulta de média. A @media at-rule poderá ser utilizada não só num nível de topo de CSS, como também dentro de qualquer CSS at-rule regras de grupo condicionais.

Sintaxe

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

Tipos de média

todos
Destinado para todos os dispositivos.
impressão
Destinado para material paginado e para documentos visualizados no ecrã no modo de pré-visualizar impressão. Por favor, consulte a secção de média paginada, e a secção de média do tutorial de Como Começar para informação sobre a formatação de problemas que são específicos para a média paginada.
ecrã
Destinado primariamente para os ecrãs de computador a cores.
gravado em relevo
Destinado para impressoras de braille paginadas.
handheld
Pretendido para dispositivoshandheld (tipicamente tela pequena, banda limitada).
impressão
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.
projeção
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.
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 caracteresfixed-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 um únic ecrã.

Especificações

== Compatibilidade com navegadores ==

Consulte também

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

Categorias

Interwiki Language Links

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

Fonte da revisão

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

<h3 id="Resumo" name="Resumo">Resumo</h3>

<p><code>A @media</code> de <a href="/pt-PT/docs/Web/CSS" title="CSS">CSS</a> <a href="/pt-PT/docs/Web/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> associa um conjunto de declarações integradas, num bloco CSS que é delimitado por parênteses curvos, com a condição definida pela conslulta de média. A <code>@media</code> at-rule poderá ser utilizada não só num nível de topo de CSS, como também dentro de qualquer <a href="https://developer.mozilla.org/pt-PT/docs/Web/CSS/At-rule#Regras_de_Grupo_Condicionais" title="en/CSS/At-rule#Conditional_Group_Rules">CSS at-rule&nbsp;regras de grupo condicionais</a>.</p>

<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3>

<pre class="eval">
@media<em>&lt;tipos de mídia&gt;</em> {
  /* media-specific rules */
}
</pre>

<h3 id="Tipos_de_m.C3.ADdia" name="Tipos_de_m.C3.ADdia">Tipos de média</h3>

<dl>
 <dt>todos</dt>
 <dd>Destinado para todos os dispositivos.</dd>
 <dt>impressão</dt>
 <dd>Destinado para material paginado e para documentos visualizados no ecrã no modo de pré-visualizar impressão. Por favor, consulte a secção de <a href="/pt-PT/docs/Web/CSS/Média_paginada" title="https://developer.mozilla.org/en/CSS/Paged_Media">média paginada,</a> e a <a href="/pt-PT/docs/Web/CSS/Como_começar/Mídia" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">secção de média do tutorial de Como Começar </a>para informação sobre a formatação de problemas que são específicos para a média paginada.</dd>
 <dt>ecrã</dt>
 <dd>Destinado primariamente para os ecrãs de computador a cores.</dd>
 <dt>gravado em relevo</dt>
 <dd>Destinado para impressoras de braille paginadas.</dd>
 <dt>handheld</dt>
 <dd>Pretendido para dispositivos<em>handheld</em> (tipicamente tela pequena, banda limitada).</dd>
 <dt>impressão</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>projeção</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>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<em>fixed-pitch</em> (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 id="Grupos_de_m.C3.ADdia" 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>&nbsp;</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>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">embossed</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</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>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">print</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">projection</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td class="header">screen</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">speech</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">tty</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</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>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
  </tr>
 </tbody>
</table>

<h3 id="Exemplos" 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 id="Notas" 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 um únic ecrã.</p>

<h3 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h3>

<ul>
 <li><a class="external" href="https://www.w3.org/TR/CSS21/media.html#at-media-rule">CSS 2.1</a></li>
</ul>

<p><span class="comment">== Compatibilidade com navegadores ==</span></p>

<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Consulte também</h3>

<p>{{ Cssxref("@media") }}, {{ Cssxref("@import") }}, {{ Cssxref("@font-face") }}</p>

<p><span class="comment">Categorias</span></p>

<p><span class="comment">Interwiki Language Links</span></p>

<p>{{ languages( { "en": "en/CSS/@media", "fr": "fr/CSS/@media", "pl": "pl/CSS/@media" } ) }}</p>
Reverter para esta revisão