Os media queries servem principalmente para definirmos estilos no CSS, que ser\u00e3o aplicados de acordo com uma certa caracter\u00edstica da Media, em que o CSS est\u00e1 sendo visualizado.<\/p>\n
A sua fun\u00e7\u00e3o na cria\u00e7\u00e3o de sites responsivos est\u00e1 em aplicar estilos de acordo com a largura do browser. O c\u00f3digo \u00e9 bem simples:<\/p>\n
\n@media (max-width: 400px) {\n div {\n background: blue;\n }\n}\n<\/code><\/pre>\nO c\u00f3digo acima ir\u00e1 definir os backgrounds das div’s como blue sempre que a tela tiver no m\u00e1ximo 400px de largura, ou seja, sempre que a tela for menor que 400px de largura.<\/p>\n
N\u00e3o tem mist\u00e9rio, basta definir o @media e adicionar qualquer bloco de c\u00f3digo CSS dentro dele.<\/p>\n
\u00c9 poss\u00edvel tamb\u00e9m misturar diferentes l\u00f3gicas como:<\/p>\n
\n@media (min-width: 400px) and (max-width: 800px) {\n p {\n color: blue;\n }\n div {\n background: red;\n }\n}\n<\/code><\/pre>\nO c\u00f3digo CSS acima ser\u00e1 apenas aplicado quando a tela tiver entre 400px e 800px de largura. Note tamb\u00e9m que \u00e9 poss\u00edvel adicionar quantos seletores e propriedades voc\u00ea precisar dentro de um \u00fanico media-query.<\/p>\n
\u00c9 comum ver media queries escritos da seguinte forma:<\/p>\n
\n@media only screen and (max-width: 400px) {\n div {\n width: 100%;\n }\n}\n<\/code><\/pre>\nNeste caso o only screen serve para aplicarmos os estilos do media-query apenas em browsers modernos e que tenho um m\u00e1ximo width de 400px. Browsers antigos (ie6, ie7 e outros) n\u00e3o conseguem identificar a palavra only e por isso acabam ignorando todo o conte\u00fado dentro do media-query.<\/p>\n
Existem tamb\u00e9m outros tipos de media, que podem ser aplicados de acordo com as cores que o dispositivo possuir e etc. Voc\u00ea pode ver uma documenta\u00e7\u00e3o mais completa aqui no site da Mozilla: https:\/\/developer.mozilla.org\/pt-BR\/docs\/Web\/Guide\/CSS\/CSS_Media_queries<\/a>.<\/p>\nVale lembrar que o conte\u00fado antes e depois do @media, ser\u00e1 aplicado normalmente independente do tamanho da tela.<\/p>\n
\ndiv {\n width: 50%;\n background: blue;\n}\n\n@media (max-width: 400px) {\n div {\n width: 100%;\n background: red;\n }\n}\n\ndiv {\n background: black;\n}\n<\/code><\/pre>\nNo exemplo acima, caso o browser possua largura menor que 400px, a div ter\u00e1 um width de 100% e o background ser\u00e1 black. Caso seja maior que 400px, ela ter\u00e1 width de 50% e background tamb\u00e9m black.<\/p>\n
Ou seja a l\u00f3gica do CSS de que o que vem por \u00faltimo possui sempre maior for\u00e7a, continua sendo aplicada independente do estilo estar dentro do @media ou n\u00e3o. Por isso o ideal \u00e9 sempre escrever os estilos que usem @media, ap\u00f3s os estilos gerais.<\/p>\n