Quer deixar o seu site com um layout responsivo em todos os dispositivos com acesso à internet? Então você precisa saber o que é media query e como usar esse recurso.

Garantir uma boa experiência para os usuários do seu site é fundamental para a reputação da sua marca ou empresa. Uma das formas de fazer isso é adequando a sua página para os diferentes tipos de dispositivo.

Você quer aprender como adaptar o layout do seu site para cada dispositivo? Então continue a leitura para descobrir o que é media query. 

O que é media query?

Apesar de ser possível fazer a definição de media query no código HTML, o ideal é fazer isso no código CSS. Isso pode facilitar alterações futuras.

Quando o programador insere um media query em um código CSS, ele determina a visualização das informações contidas na página. Ao usar esse recurso, também é possível determinar quais dados a pessoa vai ter acesso. 

Lembre-se que o tamanho das telas dos computadores, celulares e tablets pode variar bastante. Por isso, o programador pode determinar uma variação de visualização. É preciso considerar o modo de visualização mais adequado em cada tipo de tela, usando um tipo de media query. 

A sintaxe básica de um media query é:

 @media (condição) {

/* Estilizações CSS */

}

Qual é a importância de ter um site com design responsivo? 

Um site responsivo é projetado para se adaptar a qualquer tipo de tela sem comprometer a resolução do conteúdo. Essas páginas são capazes de identificar o espaço de tela disponível e adaptar os textos e imagens para aquele display. Dessa forma, eles ficam proporcionais em qualquer tipo de aparelho com acesso à internet.

Investir em um design responsivo é fundamental. Atualmente, as pessoas acessam plataformas e páginas na web de diferentes dispositivos. Neste cenário, um dos mais utilizados para isso é o celular.

Um site responsivo é essencial para garantir uma boa experiência do usuário. Dessa forma, a pessoa vai conseguir visualizar de maneira clara e precisa todas as informações contidas na sua página. Por consequência, isso vai fazer com que a taxa de rejeição do seu site diminua.

Páginas da web com baixa taxa de rejeição têm mais probabilidade de ficarem melhor posicionadas nos mecanismos de busca. O Google, por exemplo, pode entender isso como um sinal de que o seu conteúdo é relevante.

Além disso, investir em um site com design responsivo também pode ajudar a aumentar as vendas da sua empresa. As pessoas vão se sentir mais confortáveis navegando na sua página. Além disso, vão encontrar os produtos que procuram com mais facilidade e se sentir seguras comprando na sua loja on-line. 

Quais são os tipos de media?

Até aqui, explicamos o que é media query e para que serve. Conheça agora quais são os tipos dessa estrutura e descubra quais são as mais indicadas para o seu site. 

Print

Esse comando é exclusivo para impressoras. Ao utilizá-lo, é possível escolher quais informações da página serão impressas. A sintaxe é:

@media print { 

   /* Estilizações CSS/

}

Screen

Esse media type é utilizado para definir como o layout do site será exibido em diferentes tipos de dispositivos. O comando é o seguinte:

@media screen (min-width: 768px) { 

   /* Estilizações CSS/

}

Handhed

O comando handheld é utilizado apenas para definir as regras de estilo do layout que serão exibidos nos dispositivos móveis. Sua sintaxe é:

@media handheld and (mind-width: 700px) and (orientation: landscape) { 

   /* Estilizações CSS/

}

All

Esse media query é usado para adequar o layout da página para todos os tipos de mídia. O comando é o seguinte: 

@media all and (orientation: landscape) { 

   /* Estilizações CSS/

}

Outros tipos de media query

Existem outras variedades de media query que, apesar de não serem amplamente utilizadas, é importante conhecê-las. Uma delas é a “Tv’, muito empregada para adequar o layout da página para a tela de uma smart tv.

Há também o comando “speech”, cuja função é sintetizar a voz para tornar a plataforma acessível para todas as pessoas.

Entre os outros tipos podemos citar ainda o “Projection, empregado quando os formatos de apresentação PPS são solicitados. Há também o “Tty”, específico para dispositivos móveis com display limitado. 

Operadores lógicos de media query

Os operadores lógicos são utilizados para combinar recursos, limitar recursos ou escolher uma definição a partir de um comando. Veja abaixo quais são esses operadores. 

And 

Esse comando determina duas condições que precisam ocorrer de maneira simultânea para que o código CSS possa ser devidamente aplicado. Um exemplo disso é o comando @media handheld and (mind-width: 700px) and (orientation: landscape).

Not 

O operador lógico not serve para negar uma condição, podendo também ser usado juntamente com outros operadores. Para aplicá-lo, é necessário usar o seguinte comando: @media all and (not…).

Only 

A condição only impõe uma limitação. Ela determina que as condições do media query só serão aplicadas se estiverem de acordo com esse operador lógico. 

Or 

Quando o programador usar o operador lógico “or”, ele separa as condições por vírgulas. Para que o comando seja aplicado, pelo menos uma delas precisa retornar como verdadeira. 

Como usar media query no CSS?

Chegou a hora de você aprender como usar media query no CSS na prática. O processo é muito simples, no entanto, antes de iniciá-lo, é preciso relacionar o documento HTML com o arquivo CSS. 

Em seguida, é preciso estudar o design e a estrutura da página e verificar onde o layout do site deve mudar. Você pode definir um ponto para cada dispositivo. Assim, aumenta as chances do usuário ter uma boa experiência ao acessar a sua plataforma.

Após definir esses pontos, será necessário verificar quais tipos de media query e de operações lógicas são as mais indicadas para a sua página e que realmente tem potencial de melhorar a experiência do usuário.

Após fazer essa análise, basta escrever e inserir nos pontos de interrupção do arquivo CSS cada código de media query. É importante certificar como ficou o layout do site nos diferentes dispositivos. Com isso, você verifica se será preciso fazer alguma alteração ou ajuste.

Conclusão 

Saber o que é e como usar media query é a maneira mais simples e eficaz de deixar um layout responsivo. Isso vale para todos os tipos de dispositivos com acesso à internet. 

Sendo assim, analise o design e a estrutura das suas páginas em diferentes aparelhos. Verifique se o layout está amigável. Caso seja necessário, insira os comandos adequados de media query para deixar o site mais responsivo.

Quer ter acesso a mais conteúdos sobre construção de sites e programação? Então continue no blog da HostGator e confira todos os nossos conteúdos sobre esses assuntos.