Como usar consultas de mídia em HTML e CSS para criar sites responsivos
Se você deseja desenvolver sites / aplicativos da web, saber como criar designs responsivos é essencial para o seu sucesso.
No passado, a criação de sites que se adaptavam bem a diferentes tamanhos de tela era um luxo que os proprietários de sites tinham que solicitar de um desenvolvedor. No entanto, o aumento no uso de smartphones e tablets tornou o design responsivo uma necessidade no mundo do desenvolvimento de software.
Usar consultas de mídia é a melhor maneira de garantir que seu site / aplicativo da web apareça exatamente como você deseja em todos os dispositivos.
Compreendendo o design responsivo
Resumindo, o design responsivo lida com o uso de HTML / CSS para criar um layout de site / aplicativo da web que se adapta a vários tamanhos de tela. Em HTML / CSS, existem algumas maneiras diferentes de obter capacidade de resposta no design de um site:
- Usando unidades rem e em em vez de pixels (px)
- Definir a janela de visualização / escala de cada página da web
- Usando consultas de mídia
O que são consultas de mídia?
Uma consulta de mídia é um recurso do CSS que foi lançado na versão CSS3. Com a introdução deste novo recurso, os usuários de CSS ganham a capacidade de ajustar a exibição de uma página da web com base na altura, largura e orientação do dispositivo / tela (modo paisagem ou retrato).
As consultas de mídia fornecem uma estrutura para criar código uma vez e usá-lo várias vezes em todo o programa. Isso pode não parecer muito útil se você estiver desenvolvendo um site com apenas três páginas da web, mas se estiver trabalhando para uma empresa com centenas de páginas da web diferentes – isso vai se provar uma enorme economia de tempo.
Usando consultas de mídia
Há várias coisas diferentes que você precisa levar em consideração ao usar consultas de mídia: estrutura, posicionamento, intervalo e vinculação.
A estrutura das consultas de mídia
Exemplo de estrutura de consulta de mídia
@media only/not media-type and (expression){
/*CSS code*/
}A estrutura geral de uma consulta de mídia inclui:
- A palavra-chave @media
- A não / única palavra-chave
- Um tipo de mídia (que pode ser tela, impressão ou fala)
- A palavra-chave “e”
- Uma expressão única entre parênteses
- Código CSS entre chaves abertas e fechadas.
Exemplo de consulta de mídia com a única palavra-chave
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}O exemplo acima aplica o estilo CSS (especificamente uma cor de fundo azul) apenas a telas de dispositivos com largura de 450 px ou menos – basicamente smartphones. A palavra-chave “apenas” pode ser substituída pela palavra-chave “não” e o estilo CSS na consulta de mídia acima só se aplicaria a impressão e fala.
No entanto, por padrão, uma declaração de consulta de mídia geral se aplica a todos os três tipos de mídia, portanto, não há necessidade de especificar um tipo de mídia, a menos que o objetivo seja excluir um ou mais deles.
Exemplo de consulta de mídia padrão
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}O posicionamento de consultas de mídia
Uma consulta de mídia é uma propriedade CSS; ele só pode, portanto, ser usado dentro da linguagem de estilo. Existem três maneiras diferentes de incluir CSS em seu código; no entanto, apenas dois desses métodos fornecem uma maneira prática de incluir consultas de mídia em seus programas – CSS interno ou externo.
O método interno inclui adicionar a tag <style> à tag <head> do arquivo HTML e criar a consulta de mídia dentro dos parâmetros da tag <style>.
O método externo envolve criar uma consulta de mídia em um arquivo CSS externo e vinculá-lo ao seu arquivo HTML por meio da tag <link>.
A gama de consultas de mídia
Quer as consultas de mídia sejam usadas por meio de CSS interno ou externo, há um aspecto importante da linguagem de estilo que pode afetar negativamente o funcionamento de uma consulta de mídia. CSS tem uma regra de ordem de precedência. Ao usar um seletor CSS ou, neste caso, uma consulta de mídia, cada nova consulta de mídia adicionada ao arquivo CSS substitui (ou tem precedência) a anterior.
O código de consulta de mídia padrão que temos acima se destina a smartphones (450 px de largura e menos), portanto, se você quiser definir um plano de fundo diferente para tablets, pode pensar que pode simplesmente adicionar o seguinte código ao seu arquivo CSS pré-existente.
Exemplo de consulta de mídia para tablet
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
O único problema é que, devido à ordem de precedência, os tablets teriam uma cor de fundo vermelha e os smartphones agora também teriam uma cor de fundo vermelha porque 450px ou menos é inferior a 800px.
Uma forma de resolver este pequeno problema seria adicionar a consulta de mídia para tablets antes das para smartphones; o último substituiria o anterior e agora você teria smartphones com uma cor de fundo azul e tablets com uma cor de fundo vermelha.
No entanto, existe uma maneira melhor de obter estilos separados para smartphones e tablets sem se preocupar com a ordem de precedência. Este é um recurso de consultas de mídia conhecido como especificação de intervalo, onde o desenvolvedor pode criar uma consulta de mídia com a largura máxima e mínima (o intervalo).
Consulta de mídia para tablet com exemplo de intervalo
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
Com o exemplo acima, o posicionamento de consultas de mídia em uma folha de estilo torna-se irrelevante, pois o design para tablets e smartphones é direcionado a duas coleções separadas de largura.
Consultas de mídia de link
Se você não deseja incorporar consultas de mídia em seu código CSS, existe um método alternativo que você pode usar. Este método envolve o uso de consultas de mídia na tag <link> de um arquivo HTML, então, em vez de ter uma folha de estilo enorme que contém as preferências de estilo para smartphones, tablets e computadores, você pode usar três arquivos CSS separados e criar suas consultas de mídia em a tag <link>.
A tag <link> é um elemento HTML usado para importar o estilo CSS de uma folha de estilo externa. Esta tag tem uma propriedade de mídia que funciona da mesma maneira que uma consulta de mídia em CSS.
Usando consultas de mídia no exemplo de tag de link
<!-- main stylesheet -->
<link rel="stylesheet" href="main.css">
<!-- tablet stylesheet -->
<link rel="stylesheet" media="(max-width:800px) and (min-width:451px)"
href="tablet.css">
<!-- smartphone stylesheet -->
<link rel="stylesheet" media="(max-width:450px)" href="smartphone.css">
O código acima deve ser colocado na tag <head> do seu arquivo HTML. Agora tudo o que você precisa fazer é criar três arquivos CSS separados com os nomes de arquivo main.css, tablet.css e smartphone.css – em seguida, crie o design específico que você deseja para cada dispositivo.
O estilo no arquivo principal será aplicado a todas as telas com largura superior a 800 px, o estilo no arquivo do tablet será aplicado a todas as telas com largura entre 450 px e 801 px e o estilo no arquivo do smartphone será aplicado a todas as telas abaixo 451px.
Agora você tem as ferramentas para criar designs responsivos
Se você chegou ao final deste artigo, você foi capaz de aprender o que é design responsivo e por que ele é útil. Agora você pode identificar e usar consultas de mídia em arquivos CSS e HTML. Além disso, você foi apresentado à ordem de precedência no CSS e viu como isso pode afetar o funcionamento de suas consultas de mídia.
Crédito da imagem: Espaço negativo / Pexels
