Outro fator que leva a focar no design responsivo mobile-first é que a maioria das pessoas acessa a internet por meio de seus dispositivos móveis, o que representa 60%. Embora apenas 20% das pessoas usem a Internet em desktops.
Este artigo abordará as instruções para criar o design responsivo voltado para dispositivos móveis.
Como configurar o design responsivo que prioriza o celular?
O design responsivo, seja ele responsivo para dispositivos móveis ou para telas maiores, pode ser criado seguindo os métodos fornecidos abaixo:
- Crie um design responsivo voltado para dispositivos móveis.
- Use/utilize a consulta de mídia para desenvolver/criar um design responsivo para telas maiores.
Método 1: Crie um design responsivo que prioriza dispositivos móveis
Primeiro, comece criando a abordagem de design que prioriza os dispositivos móveis. Para esse propósito, siga as instruções passo a passo fornecidas abaixo.
Etapa 1: crie uma estrutura HTML
Primeiro, crie uma estrutura HTML e adicione um “ Inicialização ' no
< ul >
< que >< a href = '#' > Lar < / a >< / que >
< que >< a href = '#' > Sobre nós < / a >< / que >
< que >< a href = '#' > Nossos serviços < / a >< / que >
< que >< a href = '#' > Contate-nos < / a >< / que >
< / ul >
< / não>
< / cabeçalho>
< h1 > Bem-vindo à dica do Linux < / h1 >
< p > Um site de tutoriais. < / p >
< / seção>
< / principal>
< p > Direitos autorais da dica Linux < / p >
< / rodapé>
< / corpo >
Etapa 2: aplicar CSS
Na seção do corpo, defina o “ família de fontes ' para ' sem serifa ”. Defina também o preenchimento, a margem e a cor de fundo. Depois disso, aplique CSS no cabeçalho, rodapé e navegação:
corpo {família de fontes : sem serifa ;
margem : 0 ;
preenchimento : 0 ;
cor de fundo : #808080 ;
}
cabeçalho {
cor de fundo : roxo ;
cor : branco ;
preenchimento : 8px ;
}
navegação ul {
tipo de estilo de lista : nenhum ;
preenchimento : 0 ;
margem : 0 ;
}
o navio deles {
margem : 4px 0 ;
}
nave ul li a {
cor : branco ;
decoração de texto : nenhum ;
}
principal {
preenchimento : 18px ;
}
rodapé {
cor de fundo : rosa ;
cor : branco ;
alinhamento de texto : Centro ;
preenchimento : 8px ;
}
Como pode ser observado, o resultado abaixo confirmou que o design prioriza os dispositivos móveis:
Método 2: use consultas de mídia para criar design responsivo para telas maiores
O design acima também pode ser criado para telas maiores, como tablets e desktops. Para isso, os usuários precisam incluir media query no CSS. A largura para tablets é “ 786px ”E para desktops é“ 1024px ”.
Para aplicar as consultas de mídia, primeiro inclua o “ @meios de comunicação ”No arquivo CSS. Depois disso, especifique a propriedade “min-width” como “ 768px ”. Isso significa que sempre que o tamanho mínimo de tela “768px” ou superior for atingido, o seguinte CSS será aplicado:
@meios de comunicação ( largura mínima : 768px ) {corpo {
tamanho da fonte : 14 pixels ;
}
cabeçalho {
preenchimento : 18px ;
}
navegação ul {
mostrar : flexionar ;
}
o navio deles {
margem : 0 8px ;
}
principal {
mostrar : flexionar ;
justificar-conteúdo : espaço entre ;
alinhar itens : Centro ;
}
rodapé {
preenchimento : 18px ;
}
}
O resultado abaixo demonstrou que o design também responde em telas maiores:
Conclusão
Para configurar um design responsivo voltado para dispositivos móveis, primeiro crie uma estrutura HTML e adicione a janela de visualização. Depois disso, vincule o arquivo CSS na tag head. Em seguida, aplique CSS com base no design responsivo voltado para dispositivos móveis. Além disso, os usuários podem adicionar a consulta de mídia CSS para ajustar no dispositivo móvel. Este artigo demonstrou um procedimento detalhado para configurar um design responsivo que prioriza os dispositivos móveis.