aboutsummaryrefslogtreecommitdiff
path: root/files/pt-pt/web/css/@media/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/pt-pt/web/css/@media/index.html')
-rw-r--r--files/pt-pt/web/css/@media/index.html276
1 files changed, 0 insertions, 276 deletions
diff --git a/files/pt-pt/web/css/@media/index.html b/files/pt-pt/web/css/@media/index.html
deleted file mode 100644
index 959cc3c59f..0000000000
--- a/files/pt-pt/web/css/@media/index.html
+++ /dev/null
@@ -1,276 +0,0 @@
----
-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>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-09 11:22:08 +0000