info/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-01-17 13:38:38 +01:00
Code Issues Releases Wiki Activity

Translates media queries section to pt-br

Browse Source
This commit is contained in:
Gabriele Luz 2018-10-01 22:00:47 -03:00 committed by GitHub
parent d34e296f04
commit 4f89d81856
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
pt-br/css-pt.html.markdown
View File

@ -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.