Home-theater-designers
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
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).
Leia mais: 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 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
Existem 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 um par de chaves abertas e fechadas.
Relacionado: Usando CSS para formatar documentos para impressão
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 única palavra-chave pode ser substituída pela palavra-chave not e, em seguida, 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 à tag do arquivo HTML e criar a consulta de mídia dentro dos parâmetros da tag.
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.
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 (450px 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 maneira de resolver esse 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 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 na 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 na tag.
A 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.
Usando consultas de mídia no exemplo de tag de link
href='tablet.css'>
O código acima deve ser colocado na 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.
por que a bateria do meu laptop não está carregando?
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
Compartilhado Compartilhado Tweet O email Como definir uma imagem de fundo em CSSCSS é 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 Tópicos relacionados- Programação
- Desenvolvimento web
- Designer de Web
- CSS
Kadeisha Kean é um desenvolvedor de software full-stack e redator técnico / de tecnologia. Ela tem a habilidade distinta de simplificar alguns dos conceitos tecnológicos mais complexos; produzindo material que pode ser facilmente entendido por qualquer novato em tecnologia. Ela é apaixonada por escrever, desenvolver softwares interessantes e viajar pelo mundo (através de documentários).
Mais de Kadeisha KeanAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever