summaryrefslogtreecommitdiffhomepage
path: root/pt-br/css-pt.html.markdown
diff options
context:
space:
mode:
authorGabriele Luz <gabrieleluz@infojr.com.br>2018-10-01 22:00:47 -0300
committerGitHub <noreply@github.com>2018-10-01 22:00:47 -0300
commit4f89d81856d85055f93a565da4a39a6e5abaeccf (patch)
tree9ade80bff6274f3ecd236ea00844bcfc14104c18 /pt-br/css-pt.html.markdown
parentd34e296f041c1d974cd9a66337796461a846af5a (diff)
Translates `media queries` section to pt-br
Diffstat (limited to 'pt-br/css-pt.html.markdown')
-rw-r--r--pt-br/css-pt.html.markdown41
1 files changed, 41 insertions, 0 deletions
diff --git a/pt-br/css-pt.html.markdown b/pt-br/css-pt.html.markdown
index 956b3614..c73669d0 100644
--- a/pt-br/css-pt.html.markdown
+++ b/pt-br/css-pt.html.markdown
@@ -9,6 +9,8 @@ contributors:
- ["Deepanshu Utkarsh", "https://github.com/duci9y"]
translators:
- ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"]
+ - ["Gabriele Luz", "https://github.com/gabrieleluz"]
+
lang: pt-br
---
@@ -236,6 +238,45 @@ A precedência de estilo é a seguinte. Lembre-se, a precedência é para cada
* `B` é o próximo.
* `D` é a última.
+## Media Queries
+Media queries são recursos do CSS3 que permitem especificar quando determinadas regras de CSS devem ser aplicadas; é possível aplicar regras diferentes quando a página é impressa, quando a tela possui determinadas dimensões ou densidade de pixels e quando é lida por um leitor de tela. Media queries não adicionam especificidade ao seletor.
+
+```css
+/* Uma regra que será aplicada a todos os dispositivos */
+h1 {
+ font-size: 2em;
+ color: white;
+ background-color: black;
+}
+
+/* Altera a cor do h1 para utilizar menos tinta durante a impressão */
+@media print {
+ h1 {
+ color: black;
+ background-color: white;
+ }
+}
+
+/* Altera o tamanho da fonte quando exibida numa tela com pelo menos 480px de largura */
+@media screen and (min-width: 480px) {
+ h1 {
+ font-size: 3em;
+ font-weight: normal;
+ }
+}
+```
+Media queries podem incluir os seguintes atributos: `width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan`, `grid`. A maioria desses atributos pode ser prefixada com `min-` ou `max-`.
+
+O atributo `resolution` não é suportado em dispositivos mais antigos. Em vez disso, use `device-pixel-ratio`.
+
+Muitos smartphones e tablets tentarão renderizar a página como se estivesse num desktop a menos que você utilize a meta-tag `viewport`.
+
+```html
+<head>
+ <meta name="viewport" content="width=device-width; initial-scale=1.0">
+</head>
+```
+
## Compatibilidade
A maior parte dos recursos do CSS 2 (e muitos em CSS 3) estão disponíveis em todos os navegadores e dispositivos. Mas é sempre boa prática para verificar antes de usar um novo recurso.