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

Caio Vargas Webdesigner
(CEO Cvwebdesigner) formado em Webdesigner com experiência em mercado publicitário e desenvolvimento digital. Dentre suas habilidades estão projetos e campanhas multimídias, como Websites corporativos, e-commerce, desenvolvimento de SEO (Otimização de Sites), Campanhas Adwords, e-mail marketing e remarketing.

VOCÊ PODE GOSTAR

Postagens relacionadas.

Precisa de Ajuda?
Fale Conosco
Caio Vargas
Atendimento Whatsapp
Iniciar Atendimento!
1

Utilizamos cookies essenciais e tecnologias semelhantes de acordo com a nossa Política de Privacidade , ao continuar navegando, você concorda com estas condições.