From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-pt/web/css/@media/index.html | 276 ++++++++++++++++++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 files/pt-pt/web/css/@media/index.html (limited to 'files/pt-pt/web/css/@media') 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 +--- +

{{ CSSRef() }}

+ +

A regra "at" @media de CSS permite aplicar parte de uma folha de estilos com a condição definida por uma ou mais consultas de média.

+ +

Pode utilizar-se tanto no início do código como dentro de qualquer outra regra "at" condicional.

+ +
+

Nota: Em JavaScript, a funcionalidade desta regra está disponível através da interface {{domxref("CSSMediaRule")}} do modelo/objeto CSS.

+
+ +

Sintaxe

+ +
/* 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;
+    }
+  }
+}
+ +

Para aprofundar a sintaxe de consultas de média, por favor leia Utilizar consultas de média.

+ +

Tipos de média

+ +
+
all (todos)
+
Destinado para todos os dispositivos.
+
print (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.
+
screen (ecrã)
+
Destinado primariamente para os ecrãs de computador a cores.
+
speech (elocução)
+
+

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.

+
+
+ +

Grupos de Média

+ +
+

Nota: Esta secção aplica-se a CSS 2.1. Há vários tipos de média, introduzidos nas especificações do CSS2.1 e Media Queries 3, que foram descontinuados, como tty, tv, projection, handheld, braille, embossed, and aural. O tipo aural foi substituído pelo speech, que é semelhante.

+
+ +

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
Tiposcontinuouspagedvisualaudiospeechtactilegridbitmapinteractivestatic
brailleXXXXX
embossedXXXX
handheldXXXXXXXXX
printXXXX
projectionXXXX
screenXXXXXX
auralXXXX
ttyXXXXX
tvXXXXXXX
+ +

Exemplos

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

Questões de acessibilidade

+ +

Para comodidade das pessoas que ampliam o tamanho do texto, deve-se utilizar medidas em em na definição de {{cssxref("<length>")}}. Esta medida funciona melhor do que px quando o utilizar muda o tamanho do texto no navegador.

+ +

Considere usar consulta de média Level 4 (Nível 4) para melhorar experiência de utilização. Por exemplo, prefers-reduced-motion para detetar se o utilizador pediu ao sistema para minimizar a quantidade de animaçõe ou movimentos.

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}{{Spec2('CSS5 Media Queries')}}Reinstituída consultas de média light-level, inverted-colors e consultas média personalizadas, as quais foram removidas do Level 4 (Nível 4).
+ Adicionados recursos de média prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, e prefers-color-scheme.
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Definida sintaxe básica da regra @media.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Adicionados recursos média scripting, pointer, hover, update, overflow-block, e overflow-inline.
+ Descontinuação de todos os tipos de média excepto screen, print, speech, e all.
+ Tornou a sintaxe mais flexível com adição, entre outras coisas, da palavra-chave or.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}Sem alterações.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Definição inicial.
+ +

== Compatibilidade com navegadores ==

+ +

Consulte também

+ + + +

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

-- cgit v1.2.3-54-g00ecf