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

Em suma, 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

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).

Consulte Mais informação: A folha de dicas de propriedades CSS3 essenciais

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 tão útil se você estiver desenvolvendo um site com apenas três páginas da web, mas se você está trabalhando para uma empresa com centenas de páginas da web diferentes - este será um momento enorme saver.

Há várias coisas diferentes que você precisa levar em consideração ao usar consultas de mídia: estrutura, posicionamento, intervalo e vinculação.

@media only / not media-type e (expression) {
/ * Código CSS * /
}

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.

Relacionado: Usando CSS para formatar documentos para impressão

@media only screen e (max-width: 450px) {
corpo{
cor de fundo: azul;
}
}

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.

/ * design para smartphones * /
@media (largura máxima: 450px) {
corpo{
cor de fundo: azul;
}
}

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 o

O método externo envolve a criação de uma consulta de mídia em um arquivo CSS externo e vinculá-lo ao seu arquivo HTML por meio do marcação.

Quer as consultas de mídia sejam usadas por meio de CSS interno ou externo, há um aspecto principal 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 CSSou, 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 (450px de largura e menos), então, se você quiser definir um plano de fundo diferente para tablets você pode pensar que poderia simplesmente adicionar o código a seguir ao seu arquivo CSS pré-existente.

/ * design para tablets * /
@media (largura máxima: 800px) {
corpo{
cor de fundo: vermelho;
}
}

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).

/ * design para tablets * /
@media (largura máxima: 800px) e (largura mínima: 451) {
corpo{
cor de fundo: vermelho;
}
}

Com o exemplo acima, a colocação 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.

Se você não quiser 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 no tag 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 marcação.

O tag é 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.

 folha de estilo principal 

 folha de estilo do tablet 
href = "tablet.css">
 folha de estilo de smartphone 

O código acima deve ser colocado no

tag 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.

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

Como definir uma imagem de fundo em CSS

CSS é uma ferramenta poderosa para estilizar páginas da web. Aprender como colocar uma imagem de plano de fundo ensina muitos conceitos básicos de CSS.

Leia a seguir

Sobre o autor