• Desenvolvimento Web
  • 2 minutos de leitura
  • 749 visualizações avalie

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

Feedback

Me diga aqui abaixo nos comentários o que você achou desse post

Compartilhe com

Este website utiliza cookies próprios e de terceiros para garantir um melhor serviço e experiência de utilização. São utilizados para personalizar conteúdos e anúncios, providenciar funcionalidades das redes sociais e analisar tráfego. A informação sobre a sua utilização no nosso website também é partilhada com parceiros de redes sociais, publicidade e análise.