initial commit

1 files changed, 276 insertions, 0 deletions

diff --git a/files/pt-pt/web/css/@media/index.html b/files/pt-pt/web/css/@media/index.html
new file mode 100644
index 0000000000..959cc3c59f
--- /dev/null
+++ b/files/pt-pt/web/css/@media/index.html
@@ -0,0 +1,276 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - CSS
+  - Referencia
+  - Referencia_CSS
+translation_of: Web/CSS/@media
+---
+<p>{{ CSSRef() }}</p>
+
+<p id="Resumo">A <a href="/pt-PT/docs/Web/CSS/At-rule" title="en/CSS/At-rule">regra "at"</a> <code>@media</code> de <a href="/pt-PT/docs/Web/CSS" title="CSS">CSS</a> permite aplicar parte de uma folha de estilos com a condição definida por uma ou mais consultas de média.</p>
+
+<p>Pode utilizar-se tanto no início do código como dentro de qualquer outra regra "at" condicional.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Em JavaScript, a funcionalidade desta regra está disponível através da interface {{domxref("CSSMediaRule")}} do modelo/objeto CSS.</p>
+</div>
+
+<h2 id="Sintaxe" name="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: css"><code>/* No nível mais abrangente do código */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Dentro de outra regra-"at" condicional */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}</code></pre>
+
+<p>Para aprofundar a sintaxe de consultas de média, por favor leia <a href="/pt-PT/docs/Web/CSS/Consulta_de_mídia">Utilizar consultas de média</a>.</p>
+
+<h2 id="Tipos_de_m.C3.ADdia" name="Tipos_de_m.C3.ADdia">Tipos de média</h2>
+
+<dl>
+ <dt><code>all</code> (todos)</dt>
+ <dd>Destinado para todos os dispositivos.</dd>
+ <dt><code>print</code> (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><code>screen</code> (ecrã)</dt>
+ <dd>Destinado primariamente para os ecrãs de computador a cores.</dd>
+ <dt><code>speech</code> (elocução)</dt>
+ <dd>
+ <p>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.</p>
+ </dd>
+</dl>
+
+<h3 id="Grupos_de_m.C3.ADdia" name="Grupos_de_m.C3.ADdia">Grupos de Média</h3>
+
+<div class="blockIndicator note">
+<p><strong>Nota: </strong>Esta secção aplica-se a CSS 2.1. Há vários tipos de média, introduzidos nas especificações do CSS2.1 e <a href="https://drafts.csswg.org/mediaqueries-3/#background" rel="noopener">Media Queries 3</a>, que foram descontinuados, como <code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>. O tipo <code>aural</code> foi substituído pelo <code>speech</code>, que é semelhante.</p>
+</div>
+
+<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">aural</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>
+
+<h2 id="Exemplos" name="Exemplos">Exemplos</h2>
+
+<pre>  @media print {
+    body { font-size: 10pt }
+  }
+  @media screen {
+    body { font-size: 13px }
+  }
+  @media screen, print {
+    body { line-height: 1.2 }
+  }
+</pre>
+
+<h2 id="Notas" name="Notas">Questões de acessibilidade</h2>
+
+<p>Para comodidade das pessoas que ampliam o tamanho do texto, deve-se utilizar medidas em <code>em</code> na definição de {{cssxref("&lt;length&gt;")}}. Esta medida funciona melhor do que <code>px</code> quando o utilizar muda o tamanho do texto no navegador.</p>
+
+<p>Considere usar consulta de média Level 4 (Nível 4) para melhorar experiência de utilização. Por exemplo, <code>prefers-reduced-motion</code> para detetar se o utilizador<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"> pediu ao sistema para minimizar a quantidade de animaçõe ou movimentos</a>.</p>
+
+<h2 id="Especifica.C3.A7.C3.B5es" name="Especifica.C3.A7.C3.B5es">Especificações</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Reinstituída consultas de média <code>light-level</code>, <code>inverted-colors</code> e consultas média personalizadas, as quais foram removidas do Level 4 (Nível 4).<br>
+    Adicionados recursos de média <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code>, e <code>prefers-color-scheme</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Definida sintaxe básica da regra <code>@media</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p>Adicionados recursos média <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code>, e <code>overflow-inline</code>.<br>
+     Descontinuação de todos os tipos de média excepto <code>screen</code>, <code>print</code>, <code>speech</code>, e <code>all</code>.<br>
+     Tornou a sintaxe mais flexível com adição, entre outras coisas, da palavra-chave <code>or</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Sem alterações.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">== Compatibilidade com navegadores ==</span></p>
+
+<h3 id="Veja_tamb.C3.A9m" name="Veja_tamb.C3.A9m">Consulte também</h3>
+
+<ul>
+ <li><a class="internal" href="/pt-PT/docs/Web/CSS/Consulta_de_mídia" title="En/CSS/Media queries">Consultas de média</a></li>
+ <li>Em JavaScript, {{ domxref("CSSMediaRule") }} está associado a esta regra-at.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions#Media_features">Recursos de média em extensões da Mozilla</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions#Media_features">Recursos de média em extensões WebKit</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS/@media", "fr": "fr/CSS/@media", "pl": "pl/CSS/@media" } ) }}</p>