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

Merge pull request #3244 from gabrieleluz/master

Browse Source 
[css/pt-br] Translates `media queries` section to pt-br
This commit is contained in:
Divay Prakash
2018-10-02 15:38:28 +05:30
committed by GitHub
parent d34e296f04 4f89d81856
commit 67f785f102
1 changed files with 41 additions and 0 deletions
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"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
translators: translators:
- ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"] - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"]
- ["Gabriele Luz", "https://github.com/gabrieleluz"]
lang: pt-br 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. * `B` é o próximo.
* `D` é a última. * `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 ## 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. 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.