{"id":118137,"date":"2023-01-10T08:00:00","date_gmt":"2023-01-10T11:00:00","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=14645"},"modified":"2023-08-01T15:07:06","modified_gmt":"2023-08-01T18:07:06","slug":"o-que-e-media-query-css","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/o-que-e-media-query-css\/","title":{"rendered":"O que \u00e9 Media Query CSS? Conhecendo melhor as estruturas."},"content":{"rendered":"\n

Voc\u00ea sabe qual a import\u00e2ncia de um site ou aplicativo ser responsivo<\/a>? E tem ideia de como fazer isso na hora de programar? Essa \u00e9 uma fun\u00e7\u00e3o da Media Query CSS<\/strong>, que permite a estiliza\u00e7\u00e3o de uma p\u00e1gina para torn\u00e1-la responsiva ao usu\u00e1rio de acordo com sua tela. <\/p>\n\n\n\n

Esse \u00e9 um t\u00f3pico muito importante para quem tem interesse em programa\u00e7\u00e3o front-end<\/a>, pois \u00e9 algo praticamente obrigat\u00f3rio para a constru\u00e7\u00e3o de qualquer site ou aplica\u00e7\u00e3o hoje em dia. <\/p>\n\n\n\n

Entenda o que \u00e9 uma Media Query CSS e aprenda como utilizar a estrutura na constru\u00e7\u00e3o de um site. <\/p>\n\n\n\n

O que \u00e9 Media Query CSS?<\/h2>\n\n\n\n

Media Query CSS nada mais \u00e9 do que uma estrutura c\u00f3digo colocada no arquivo CSS de um site e que tem como objetivo determinar a responsividade daquela aplica\u00e7\u00e3o<\/strong>, considerando os diferentes usos de tela e tamb\u00e9m outros tipos de usabilidade. <\/p>\n\n\n\n

Dessa maneira, est\u00e1 relacionada com a estiliza\u00e7\u00e3o das p\u00e1ginas e tamb\u00e9m com a constru\u00e7\u00e3o do HTML, dois pontos primordiais para o front-end. <\/p>\n\n\n\n

Enquanto o HTML traz o conte\u00fado do site, o CSS \u00e9 respons\u00e1vel por fazer essa estiliza\u00e7\u00e3o<\/a>, ou seja, criar a maneira como o usu\u00e1rio ver\u00e1 aquele conte\u00fado na tela. <\/p>\n\n\n\n

Assim, o Media Query CSS \u00e9 implementado no c\u00f3digo CSS<\/strong> e determina, a partir de condi\u00e7\u00f5es determinadas pelo programador, o que o usu\u00e1rio ir\u00e1 ver naquela aplica\u00e7\u00e3o de acordo com a tela em que est\u00e1 acessando.<\/p>\n\n\n\n

Dessa maneira, a tag @media<\/strong> permite que o programador escolha como ser\u00e1 a visualiza\u00e7\u00e3o de uma p\u00e1gina de acordo com as condi\u00e7\u00f5es escolhidas. <\/p>\n\n\n\n

Um ponto interessante \u00e9 que tamb\u00e9m \u00e9 poss\u00edvel escolher essa visualiza\u00e7\u00e3o para outras situa\u00e7\u00f5es, como impress\u00e3o. Isso porque existem tamb\u00e9m outros Media Types, como veremos mais para frente. <\/p>\n\n\n\n

Por que a responsividade \u00e9 importante?<\/h3>\n\n\n\n

A responsividade \u00e9 o nome dado \u00e0 capacidade de um site se comportar da maneira correta independente do dispositivo ao qual est\u00e1 sendo acessado.<\/strong> Hoje em dia, por exemplo, grande parte das pessoas acessa sites diretamente pelo  celular. <\/p>\n\n\n\n

Isso quer dizer que al\u00e9m de funcionar em telas maiores, os sites precisam estar adequados tamb\u00e9m para outros tipos de telas.<\/strong> Claro, nem todo celular tem o mesmo tamanho. <\/p>\n\n\n\n

Nesse caso, o programador determina um \u201crange\u201d (varia\u00e7\u00e3o) de visualiza\u00e7\u00e3o, considerando o que fica mais confort\u00e1vel dentro dessa varia\u00e7\u00e3o de tamanho.  <\/p>\n\n\n\n

A responsividade \u00e9 um ponto muito importante pois est\u00e1 diretamente relacionada com a <\/strong>experi\u00eancia do usu\u00e1rio<\/strong><\/a>, um dos pontos mais importantes para qualquer empresa atualmente. <\/p>\n\n\n\n

O foco \u00e9 tornar essa experi\u00eancia o mais positiva poss\u00edvel, independente de qual o ponto de contato que esse usu\u00e1rio ter\u00e1 com a empresa e o site. <\/p>\n\n\n\n

Por isso, entender como funciona o Media Query CSS \u00e9 praticamente um conhecimento obrigat\u00f3rio para todo programador que tenha que mexer no front-end de uma aplica\u00e7\u00e3o, seja ele especializado nisso ou um Full Stack. <\/p>\n\n\n\n

Sintaxe do Media Query CSS<\/p>\n\n\n\n

Um dos melhores pontos do uso do Media Query \u00e9 que essa funcionalidade tem uma estrutura muito f\u00e1cil de ser utilizada, com sintaxe simples de ser aplicada e intuitiva. <\/p>\n\n\n\n

A sintaxe b\u00e1sica dentro do arquivo .css<\/em> de uma Media Query \u00e9:<\/strong><\/p>\n\n\n\n

@media (condi\u00e7\u00e3o) {\n  codigoCSS\n}<\/pre>\n\n\n\n
Para dar um exemplo pr\u00e1tico, a documenta\u00e7\u00e3o Web Docs do Mozilla<\/a> coloca:<\/p>\n\n\n\n
@media (max-width: 600px) {\n  .facet_sidebar {\n    display: none;\n   }\n}<\/pre>\n\n\n\n
Ou seja, \u00e9 poss\u00edvel criar defini\u00e7\u00f5es para cada classe do HTML dentro da Media Query no arquivo CSS. <\/strong>Assim, voc\u00ea estiliza cada classe de acordo com as condi\u00e7\u00f5es colocadas na Media Featured. <\/p>\n\n\n\n
Ou seja, basicamente, voc\u00ea define a tag @media o que significa que a partir dali ser\u00e3o definidas as caracter\u00edsticas de m\u00eddia de acordo com uma condi\u00e7\u00e3o, que vai ser colocada em par\u00eanteses. <\/p>\n\n\n\n
Essas condi\u00e7\u00f5es nada mais s\u00e3o do que a defini\u00e7\u00e3o de quando cada estiliza\u00e7\u00e3o em CSS vai ser utilizada. <\/p>\n\n\n\n
No caso dos tamanhos de telas, por exemplo, \u00e9 onde define-se o screen, ou seja, at\u00e9 quantos pixels de tela est\u00e3o sendo considerados no range<\/strong> para que tal c\u00f3digo CSS seja utilizado. <\/p>\n\n\n\n
Por\u00e9m, tamb\u00e9m \u00e9 poss\u00edvel fazer a defini\u00e7\u00e3o da Media Query diretamente no HTML<\/strong>, em elemento de link:<\/p>\n\n\n\n
<link rel=\"stylesheet\" media=\"(max-width: 800px)\" href=\"example.css\" \/><\/pre>\n\n\n\n
Entretanto, o indicado mesmo \u00e9 fazer toda a estiliza\u00e7\u00e3o separada <\/strong>e relacionar o conte\u00fado com o CSS, pois isso cria um c\u00f3digo mais limpo e independente, facilitando mudan\u00e7as futuras. Na se\u00e7\u00e3o de Como usar as Media Queries voc\u00ea consegue conferir como fazer isso!<\/p>\n\n\n\n
\"exemplo
Exemplo de Medias Queries sendo utilizados de maneira relacionada. Imagem: CSS Tricks<\/a><\/figcaption><\/figure>\n\n\n\n
Os operadores l\u00f3gicos de Media Query CSS<\/h3>\n\n\n\n
Essas condi\u00e7\u00f5es colocadas na Media Query CSS tamb\u00e9m podem ter operadores l\u00f3gicos. Isso quer dizer, pode-se unir duas defini\u00e7\u00f5es, fazer escolha entre duas, entre outros detalhes, apenas utilizando os operadores l\u00f3gicos que toda linguagem de programa\u00e7\u00e3o utiliza.<\/p>\n\n\n\n
Os operadores que podem ser utilizados s\u00e3o: and, not, only e or.<\/strong><\/p>\n\n\n\n
And (e): <\/strong>define duas condi\u00e7\u00f5es que precisam ocorrer de maneira conjunta. Ou seja, a primeira condi\u00e7\u00e3o e a segunda condi\u00e7\u00e3o precisam retornar como verdadeiras para que o CSS seja aplicado. <\/p>\n\n\n\n
Exemplo:<\/strong><\/p>\n\n\n\n
@media (min-width: 500px) and (orientation: landscape) { ... }<\/pre>\n\n\n\n
Not (n\u00e3o):<\/strong> ele gera uma nega\u00e7\u00e3o da condi\u00e7\u00e3o. Por exemplo, um CSS pode ser utilizado em uma determinada condi\u00e7\u00e3o e\/ou outra negada. Por exemplo, ao colocar um \u201cnot color\u201d, entende-se que ser\u00e1 aplicada mesmo quando o dispositivo n\u00e3o tiver cor. Tamb\u00e9m \u00e9 combinado com outros operadores<\/p>\n\n\n\n
Exemplo:<\/strong><\/p>\n\n\n\n
@media all and (not color) { ... }<\/pre>\n\n\n\n
Only (apenas):<\/strong> \u00e9 um operador de limita\u00e7\u00e3o. De maneira geral, significa que todas as condi\u00e7\u00f5es de Media Query s\u00f3 ser\u00e3o feitas apenas se atenderem a condi\u00e7\u00e3o do only. <\/p>\n\n\n\n
Exemplo:<\/strong><\/p>\n\n\n\n
<link rel=\"stylesheet\" media=\"only screen and (color)\" href=\"example.css\" \/><\/pre>\n\n\n\n
Or (ou):<\/strong> o operador ou \u00e9 utilizado de maneira diferente em Media Queries. Em vez do operador em si, as condi\u00e7\u00f5es s\u00e3o separadas por v\u00edrgula e entende-se que se ao menos uma delas retornar verdadeira, o estilo ser\u00e1 aplicado. <\/p>\n\n\n\n
Exemplo:<\/strong><\/p>\n\n\n\n
@media (min-width: 700px), handheld and (orientation: landscape) { ... }<\/pre>\n\n\n\n
O que s\u00e3o e quais os principais Media Types?<\/h2>\n\n\n\n
Ao criar uma Media Query \u00e9 preciso entender tamb\u00e9m o conceito de Media Types. <\/strong>Como o nome sugere, trata-se dos tipos de m\u00eddia que est\u00e3o sendo considerados. <\/p>\n\n\n\n
Os Media Types direcionam o CSS para um tipo espec\u00edfico de m\u00eddia. <\/strong>Ou seja, faz uma conex\u00e3o entre o CSS e aquele tipo de m\u00eddia. Logo, apenas que o Media Type for daquele tipo de documento, esse CSS ser\u00e1 aplicado. <\/p>\n\n\n\n
Aprofundando um pouco mais, esse tipo de valida\u00e7\u00e3o acontece pelos Medias Featured<\/strong>, que retornam como verdadeiro ou falso ao validar o tipo de documento.<\/strong> Assim, o CSS s\u00f3 \u00e9 aplicado quando passa por essa valida\u00e7\u00e3o. <\/p>\n\n\n\n
Al\u00e9m disso, Medias Query CSS tamb\u00e9m podem ser utilizados com operadores l\u00f3gicos, os mesmos de outras linguagens de programa\u00e7\u00e3o, fazendo com que o desenvolvedor crie condi\u00e7\u00f5es mais espec\u00edficas para cada parte do HTML<\/strong>.  <\/p>\n\n\n\n
Principais Media Types<\/h3>\n\n\n\n
\"Exemplo
Exemplo visual das refer\u00eancias de Media Types. Imagem: CSS Solid<\/a><\/figcaption><\/figure>\n\n\n\n
print:<\/strong> utilizado para impressoras, determina o que ser\u00e1 exibido ou n\u00e3o caso a p\u00e1gina seja impressa. <\/p>\n\n\n\n
@media print {\n c\u00f3digoCSS\n}<\/pre>\n\n\n\n
screen: <\/strong>utilizado para determinar seu uso em qualquer tipo de tela. Com certeza o mais utilizado e pode ser combinado com outras condi\u00e7\u00f5es (nesse caso, o tamanho da tela). <\/p>\n\n\n\n
@media screen and (max-width: tamanho-da-tela) {\n c\u00f3digoCSS\n}<\/pre>\n\n\n\n
handheld: <\/strong>\u00e9 o tipo espec\u00edfico para dispositivos menores, como celular e tablets, vou tamb\u00e9m considerar a mobilidade, como utiliz\u00e1-lo na horizontal. <\/p>\n\n\n\n
@media handheld and (min-width: tamanhopx) and (orientantion: landscape) {\n c\u00f3digoCSS\n}<\/pre>\n\n\n\n
all: <\/strong>utilizado para todo tipo de m\u00eddia. Ou seja, todo screen independente do tamanho e da orienta\u00e7\u00e3o receber\u00e1 essa mesma estiliza\u00e7\u00e3o de CSS. <\/p>\n\n\n\n
@media all and (orientation: landscape){\n c\u00f3digoCSS\n}<\/pre>\n\n\n\n
Alguns outros que nem sempre s\u00e3o utilizados mas que s\u00e3o interessantes de conhecer s\u00e3o: <\/p>\n\n\n\n