From 18eb083fb64c77b6cf4aec36686a7058f2b03fdc Mon Sep 17 00:00:00 2001 From: lbertolazzi <33129418+lbertolazzi@users.noreply.github.com> Date: Thu, 26 Oct 2017 13:42:44 -0200 Subject: [css/pt-br] Missing translation --- pt-br/css-pt.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pt-br/css-pt.html.markdown') diff --git a/pt-br/css-pt.html.markdown b/pt-br/css-pt.html.markdown index b1fbd961..956b3614 100644 --- a/pt-br/css-pt.html.markdown +++ b/pt-br/css-pt.html.markdown @@ -25,7 +25,7 @@ O foco principal deste artigo é sobre a sintaxe e algumas dicas gerais. ```css /* Comentários aparecem dentro do slash-asterisk, tal como esta linha! - não há "comentários de uma linha"; este é o único estilo de comentário * / + Não há "comentários de uma linha"; este é o único estilo de comentário * / /* #################### ## SELETORES -- cgit v1.2.3 From 4f89d81856d85055f93a565da4a39a6e5abaeccf Mon Sep 17 00:00:00 2001 From: Gabriele Luz Date: Mon, 1 Oct 2018 22:00:47 -0300 Subject: Translates `media queries` section to pt-br --- pt-br/css-pt.html.markdown | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) (limited to 'pt-br/css-pt.html.markdown') 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 + + + +``` + ## 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. -- cgit v1.2.3