Como utilizar Media Queries para sites Responsivos

Os media queries servem principalmente para definirmos estilos no CSS, que serão aplicados de acordo com uma certa característica da Media, em que o CSS está sendo visualizado.

A sua função na criação de sites responsivos está em aplicar estilos de acordo com a largura do browser. O código é bem simples:

@media (max-width: 400px) {
 div {
 background: blue;
 }
}

O código acima irá definir os backgrounds das div’s como blue sempre que a tela tiver no máximo 400px de largura, ou seja, sempre que a tela for menor que 400px de largura.

Não tem mistério, basta definir o @media e adicionar qualquer bloco de código CSS dentro dele.

É possível também misturar diferentes lógicas como:

@media (min-width: 400px) and (max-width: 800px) {
 p {
 color: blue;
 }
 div {
 background: red;
 }
}

O código CSS acima será apenas aplicado quando a tela tiver entre 400px e 800px de largura. Note também que é possível adicionar quantos seletores e propriedades você precisar dentro de um único media-query.

É comum ver media queries escritos da seguinte forma:

@media only screen and (max-width: 400px) {
 div {
 width: 100%;
 }
}

Neste caso o only screen serve para aplicarmos os estilos do media-query apenas em browsers modernos e que tenho um máximo width de 400px. Browsers antigos (ie6, ie7 e outros) não conseguem identificar a palavra only e por isso acabam ignorando todo o conteúdo dentro do media-query.

Existem também outros tipos de media, que podem ser aplicados de acordo com as cores que o dispositivo possuir e etc. Você pode ver uma documentação mais completa aqui no site da Mozilla: https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries.

Vale lembrar que o conteúdo antes e depois do @media, será aplicado normalmente independente do tamanho da tela.

div {
 width: 50%;
 background: blue;
}

@media (max-width: 400px) {
 div {
 width: 100%;
 background: red;
 }
}

div {
 background: black;
}

No exemplo acima, caso o browser possua largura menor que 400px, a div terá um width de 100% e o background será black. Caso seja maior que 400px, ela terá width de 50% e background também black.

Ou seja a lógica do CSS de que o que vem por último possui sempre maior força, continua sendo aplicada independente do estilo estar dentro do @media ou não. Por isso o ideal é sempre escrever os estilos que usem @media, após os estilos gerais