CSS3: Trabalhando com Media Queries

Motivaç�o

A regra @media, inserida na vers�o 2 das CSS, permitia a aplicaç�o condicional de estilos, dependendo do tipo de dispositivo/m�dia (media types) por meio do qual a p�gina fosse acessada. Assim, era poss�vel utilizar, por exemplo, uma formataç�o padr�o quando o site fosse acessado via browser, e um estilo diferenciado para o modo de impress�o.

Nas CSS3, esse recurso foi expandido para permitir o uso de queries (filtros), capazes de avaliar n�o s� o tipo de m�dia, mas tamb�m par�metros como orientaç�o da p�gina, largura e altura. Isso permite, por exemplo, a aplicaç�o de estilos diferentes para telas maiores (desktops) e menores (tablets e smartphones), adequando a forma como o conte�do � exibido para o usu�rio, a fim de oferecer sempre a melhor experi�ncia.

Media types

At� as CSS2, para aplicar um estilo com base na regra @media, bastava utilizar a seguinte sintaxe:


  @media [media type] {
           estilos
  }

Para o argumento [media type], os valores suportados s�o: screen, para visualizaç�o em telas quaisquer; print, para telas de impress�o; speech para sintetizadores de voz ou leitores de tela; ou all, para todos os tipos, all � o valor padr�o caso n�o tenha sido definido uma media type. Na parte interna da regra, mantemos a sintaxe padr�o das CSS, com seus seletores e demais regras.

A Listagem 1 apresenta um exemplo de uso do @media que altera a cor do texto dependendo do tipo de m�dia. Dessa forma, quando a p�gina for acessada de um browser, visualizaremos a cor azul; j� em modo de impress�o, visualizaremos a cor vermelha.


@media screen {
    body {
        color: blue;
    }
}
@media print {
    body {
        color: red;
    }
}

Listagem 1. Exemplo de uso dos media types

Observe, na Figura 1, o resultado desse c�digo. Enquanto na parte superior vemos o texto na cor padr�o ao acessar a p�gina pelo browser, na parte inferior vemos o mesmo texto em vermelho, por utilizarmos o comando de impress�o.

Figura 1. Cor do texto alterado em media types diferentes

Media Queries

Nas CSS3, a sintaxe para uso das media queries deriva daquela que vimos anteriormente, adicionando apenas alguns argumentos e operadores, como podemos observar a seguir:


  @media [not|only] [media type] and ([query]) {
         estilos
  }

Os operadores not e only permitem negar um tipo de m�dia, ou especificar que apenas determinado tipo seja atendido, respectivamente. Por exemplo, a express�o not speech faria com que as regras n�o fossem aplicadas a leitores de tela, enquanto que only screen faria com que apenas telas fossem atendidas.

Por sua vez, o operador and faz a ligaç�o entre o tipo de m�dia e o filtro adicional que ser� especificado entre par�nteses, no lugar de query. Nesse ponto podemos utilizar as diversas propriedades da m�dia, como orientaç�o, largura e altura, para obter os resultados desejados.

Na Listagem 2 temos um exemplo de uso das media queries. Com esse c�digo, aplicamos o plano de fundo azul para p�ginas com at� 640px de largura e vermelho para aquelas com at� 480px de largura. Acima de 640px, o comportamento padr�o ser� assumido, ou seja, ser� mantida a p�gina branca.


  @media screen and (max-width: 640px){
      body {
          background-color: blue;
      }
  }
  @media screen and (max-width: 480px){
      body {
          background-color: red;
      }
  }

Listagem 2. Exemplo de uso das media queries

Run

O resultado, agora, � o que vemos na Figura 2.

Figura 2. Resultado do uso das media queries

Entre as v�rias propriedades que podem ser usadas, as mais comuns s�o: min-width, min-height, max-width, max-height, width e height. A partir delas podemos, por exemplo, adaptar as p�ginas para apresentar o comportamento responsivo, ajustando-as adequadamente conforme os diferentes tamanhos de tela.

Confira tamb�m

Curso de Python

Curso

CSS na pr�tica

Curso

CSS: da Sintaxe ao Flexbox

S�rie

CSS3: Media Queries

Neste artigo veremos como utilizar o recurso de media queries das CSS3 para aplicar estilos às páginas dependendo de parâmetros como largura, altura e orientação.