Como utilizar Media Queries para sites Responsivos

Para mais vídeos como esse em: https://www.origamid.com Download dos arquivos aqui: https://www.origamid.com/codex/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.