O que é Media Query CSS? Conhecendo melhor as estruturas.
Você sabe qual a importância de um site ou aplicativo ser responsivo? E tem ideia de como fazer isso na hora de programar? Essa é uma função da Media Query CSS, que permite a estilização de uma página para torná-la responsiva ao usuário de acordo com sua tela.
Publicado em 10 de janeiro de 2023
Você sabe qual a importância de um site ou aplicativo ser responsivo? E tem ideia de como fazer isso na hora de programar? Essa é uma função da Media Query CSS, que permite a estilização de uma página para torná-la responsiva ao usuário de acordo com sua tela.
Esse é um tópico muito importante para quem tem interesse em programação front-end, pois é algo praticamente obrigatório para a construção de qualquer site ou aplicação hoje em dia.
Entenda o que é uma Media Query CSS e aprenda como utilizar a estrutura na construção de um site.
Glossário
O que é Media Query CSS?
Media Query CSS nada mais é do que uma estrutura código colocada no arquivo CSS de um site e que tem como objetivo determinar a responsividade daquela aplicação, considerando os diferentes usos de tela e também outros tipos de usabilidade.
Dessa maneira, está relacionada com a estilização das páginas e também com a construção do HTML, dois pontos primordiais para o front-end.
Enquanto o HTML traz o conteúdo do site, o CSS é responsável por fazer essa estilização, ou seja, criar a maneira como o usuário verá aquele conteúdo na tela.
Assim, o Media Query CSS é implementado no código CSS e determina, a partir de condições determinadas pelo programador, o que o usuário irá ver naquela aplicação de acordo com a tela em que está acessando.
Dessa maneira, a tag @media permite que o programador escolha como será a visualização de uma página de acordo com as condições escolhidas.
Um ponto interessante é que também é possível escolher essa visualização para outras situações, como impressão. Isso porque existem também outros Media Types, como veremos mais para frente.
Por que a responsividade é importante?
A responsividade é o nome dado à capacidade de um site se comportar da maneira correta independente do dispositivo ao qual está sendo acessado. Hoje em dia, por exemplo, grande parte das pessoas acessa sites diretamente pelo celular.
Isso quer dizer que além de funcionar em telas maiores, os sites precisam estar adequados também para outros tipos de telas. Claro, nem todo celular tem o mesmo tamanho.
Nesse caso, o programador determina um “range” (variação) de visualização, considerando o que fica mais confortável dentro dessa variação de tamanho.
A responsividade é um ponto muito importante pois está diretamente relacionada com a experiência do usuário, um dos pontos mais importantes para qualquer empresa atualmente.
O foco é tornar essa experiência o mais positiva possível, independente de qual o ponto de contato que esse usuário terá com a empresa e o site.
Por isso, entender como funciona o Media Query CSS é praticamente um conhecimento obrigatório para todo programador que tenha que mexer no front-end de uma aplicação, seja ele especializado nisso ou um Full Stack.
Sintaxe do Media Query CSS
Um dos melhores pontos do uso do Media Query é que essa funcionalidade tem uma estrutura muito fácil de ser utilizada, com sintaxe simples de ser aplicada e intuitiva.
A sintaxe básica dentro do arquivo .css de uma Media Query é:
@media (condição) {
codigoCSS
}
Para dar um exemplo prático, a documentação Web Docs do Mozilla coloca:
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
Ou seja, é possível criar definições para cada classe do HTML dentro da Media Query no arquivo CSS. Assim, você estiliza cada classe de acordo com as condições colocadas na Media Featured.
Ou seja, basicamente, você define a tag @media o que significa que a partir dali serão definidas as características de mídia de acordo com uma condição, que vai ser colocada em parênteses.
Essas condições nada mais são do que a definição de quando cada estilização em CSS vai ser utilizada.
No caso dos tamanhos de telas, por exemplo, é onde define-se o screen, ou seja, até quantos pixels de tela estão sendo considerados no range para que tal código CSS seja utilizado.
Porém, também é possível fazer a definição da Media Query diretamente no HTML, em elemento de link:
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
Entretanto, o indicado mesmo é fazer toda a estilização separada e relacionar o conteúdo com o CSS, pois isso cria um código mais limpo e independente, facilitando mudanças futuras. Na seção de Como usar as Media Queries você consegue conferir como fazer isso!
Os operadores lógicos de Media Query CSS
Essas condições colocadas na Media Query CSS também podem ter operadores lógicos. Isso quer dizer, pode-se unir duas definições, fazer escolha entre duas, entre outros detalhes, apenas utilizando os operadores lógicos que toda linguagem de programação utiliza.
Os operadores que podem ser utilizados são: and, not, only e or.
And (e): define duas condições que precisam ocorrer de maneira conjunta. Ou seja, a primeira condição e a segunda condição precisam retornar como verdadeiras para que o CSS seja aplicado.
Exemplo:
@media (min-width: 500px) and (orientation: landscape) { ... }
Not (não): ele gera uma negação da condição. Por exemplo, um CSS pode ser utilizado em uma determinada condição e/ou outra negada. Por exemplo, ao colocar um “not color”, entende-se que será aplicada mesmo quando o dispositivo não tiver cor. Também é combinado com outros operadores
Exemplo:
@media all and (not color) { ... }
Only (apenas): é um operador de limitação. De maneira geral, significa que todas as condições de Media Query só serão feitas apenas se atenderem a condição do only.
Exemplo:
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
Or (ou): o operador ou é utilizado de maneira diferente em Media Queries. Em vez do operador em si, as condições são separadas por vírgula e entende-se que se ao menos uma delas retornar verdadeira, o estilo será aplicado.
Exemplo:
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
O que são e quais os principais Media Types?
Ao criar uma Media Query é preciso entender também o conceito de Media Types. Como o nome sugere, trata-se dos tipos de mídia que estão sendo considerados.
Os Media Types direcionam o CSS para um tipo específico de mídia. Ou seja, faz uma conexão entre o CSS e aquele tipo de mídia. Logo, apenas que o Media Type for daquele tipo de documento, esse CSS será aplicado.
Aprofundando um pouco mais, esse tipo de validação acontece pelos Medias Featured, que retornam como verdadeiro ou falso ao validar o tipo de documento. Assim, o CSS só é aplicado quando passa por essa validação.
Além disso, Medias Query CSS também podem ser utilizados com operadores lógicos, os mesmos de outras linguagens de programação, fazendo com que o desenvolvedor crie condições mais específicas para cada parte do HTML.
Principais Media Types
print: utilizado para impressoras, determina o que será exibido ou não caso a página seja impressa.
@media print {
códigoCSS
}
screen: utilizado para determinar seu uso em qualquer tipo de tela. Com certeza o mais utilizado e pode ser combinado com outras condições (nesse caso, o tamanho da tela).
@media screen and (max-width: tamanho-da-tela) {
códigoCSS
}
handheld: é o tipo específico para dispositivos menores, como celular e tablets, vou também considerar a mobilidade, como utilizá-lo na horizontal.
@media handheld and (min-width: tamanhopx) and (orientantion: landscape) {
códigoCSS
}
all: utilizado para todo tipo de mídia. Ou seja, todo screen independente do tamanho e da orientação receberá essa mesma estilização de CSS.
@media all and (orientation: landscape){
códigoCSS
}
Alguns outros que nem sempre são utilizados mas que são interessantes de conhecer são:
- Projection: utilizado quando solicita-se apresentação em formatos como PPS;
- Speech: utilizado para sintetizador de voz, importante também para acessibilidade;
- Tty: utilizado para dispositivos portáteis ou com display limitado, como alguns tipos de telas mais antigos;
- Tv: considerando tela de televisores. É bastante utilizado hoje em dia, apesar de algumas aplicações utilizarem diretamente a type screen.
Como usar Media Queries CSS, na prática
Agora que você já sabe as principais informações sobre Media Query CSS e qual a sintaxe utilizada, é hora de entender seu funcionamento na prática.
Basicamente, as Media Queries CSS são adicionadas diretamente no documento CSS do projeto que está sendo construído. Na prática, funcionam como as tags e classes utilizadas, que aplicam a estilização no documento HTML.
Relacionando HTML e CSS
Dessa maneira, o primeiro passo é relacionar o documento HTML com o documento CSS. Isso é feito no documento HTML, na tag <head>, bem na parte superior do código.
Para isso, abra o documento HTML e coloque nessa seção o seguinte código:
<link href="estilos/estilo.css" rel="stylesheet">
Note que “estilos/estilo.css” refere-se à pasta (diretório) chamada “estilos” na qual o documento “estilo.css” está armazenado. Ou seja, é o caminho para acessar o documento CSS.
Caso esteja no mesmo diretório do arquivo HTML, é só chamar diretamente o nome do arquivo.
Criando as classes, divs e elementos no HTML
Com os documentos relacionados, o desenvolvedor pode estilizar a página HTML diretamente no arquivo CSS. Esse é o funcionamento básico da criação do web design de uma página. Mas por que isso é importante para as Medias Queries?
Porque são essas classes, divs e elementos que também serão utilizados dentro das Media Queries para definir o que será exibido para o usuário de acordo com a condição colocada.
Por isso, é preciso criar as divs (seções, divisões no HTML), nomear a class (nome de referência no CSS) e definir os elementos a serem estilizados. O ideal é que isso seja feito com nomes fáceis de serem identificados, prezando sempre por um código limpo e entendível.
Criando Media Query CSS
Feita a configuração inicial dos elementos de HTML e CSS, é possível aplicar Medias Queries e suas condições de visualização.
Para isso, como vimos na sintaxe básica, você abre a tag de @media, coloca suas condições e dentro da tag, implementa as estilizações. Tudo isso feito de acordo com as classes, divs e elementos já criados anteriormente.
@media (max-width: 600px) { /* usa a tag @media, coloca a definição de largura */
.facet_sidebar { /* indica estilização feita na class facet_sidebar */
display: none;
}
}
Lembre-se também dos operadores lógicos, que criam ainda mais especificidades, o que é importante tanto para a responsividade quanto para a acessibilidade.
De maneira geral, aprender a utilizar as Media Queries em CSS é uma questão de muito treino, prática e necessidade de cada projeto.
Conseguir criar sites cada vez mais sofisticados com HTML e CSS é um passo importante na carreira de qualquer desenvolvedor front-end.
E entender sobre responsividade, usabilidade, acessibilidade e experiência do usuário faz parte desse tipo de conhecimento.
Com isso sendo bem aplicado, é só começar a aprender linguagens que dão interatividade ao site, como é o caso do JavaScript e, depois, fazer o front-end completo, considerando conexão com servidor, entre outros pontos mais complexos.
Porém, ter a base do entendimento é primordial para quem quer se destacar ou está buscando uma nova carreira.
Sempre busque mais informações sobre Media Queries e esteja sempre atento às atualizações, que são feitas de acordo com as mudanças e telas do mercado.
Na carreira de desenvolvimento, o treino é o que mais faz diferença para realmente aprender e estar preparado para qualquer situação no mercado.
Aprenda programação com a Awari
Quem deseja aprender a programar tem na área de front-end um ótimo caminho de aprendizado.
Essa é geralmente a área que a maioria das pessoas inicia seu aprendizado em programação, pois abrange diversos conhecimentos e tem um grande mercado para atuar.
Entrar para a área da tecnologia exige estudo e dedicação, mas é um dos setores com melhores salários e possibilidades de carreira. Isso porque o conhecimento aplicado é bastante específico, fazendo com que os profissionais sejam cada vez mais valorizados.
Aprender o que é Media Query CSS é apenas um dos tópicos que um programador front-end precisa saber para atuar na área. Quer aprender mais sobre programação e entrar de vez para uma das áreas que mais cresce em todo o mundo?
Conheça nossa Trilha de Conhecimento de Programação e construa uma carreira de sucesso dentro da tecnologia!
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
Curso Técnico de Desenvolvedor de Software: Aprenda as habilidades necessárias para se tornar um profissional de sucesso na área de desenvolvimento de software.
Resumo: Descubra os benefícios de fazer um curso técnico...
