Navegar:104
Criar um site responsivo é uma habilidade essencial para qualquer desenvolvedor front-end. Um site responsivo ajusta seu layout e conteúdo com base no dispositivo e no tamanho da tela, garantindo uma ótima experiência do usuário em todos os dispositivos. Neste artigo, orientaremos você no processo de construção de um site responsivo básico usando HTML e CSS.
Antes de começar, você deve ter um conhecimento básico de HTML e CSS. A familiaridade com CSS Flexbox e consultas de mídia também será benéfica.
Comece criando uma nova pasta de projeto e adicionando os seguintes arquivos:
Abra index.html e adicione a estrutura HTML básica que você deseja, pode ser qualquer coisa:
Responsive Website
My Responsive Website
Welcome to My Website
This is a simple responsive website built with HTML and CSS.
About Us
We provide excellent web development services.
Our Services
We offer a wide range of web development services.
Contact Us
Feel free to reach out to us for any inquiries.
Em seguida, abra o arquivo estilos.css e comece adicionando alguns estilos básicos:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
}
header h1 {
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}
Para tornar o site responsivo, usaremos media queries. Isso nos permite aplicar estilos diferentes com base no tamanho da tela. Adicione as seguintes consultas de mídia a estilos.css:
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 0.5rem 0;
}
main {
padding: 1rem;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.5rem;
}
nav ul li {
margin: 0.25rem 0;
}
main {
padding: 0.5rem;
}
}
Abra index.html em um navegador da web e redimensione a janela do navegador para ver como o layout se ajusta aos diferentes tamanhos de tela. Você deverá ver a pilha do menu de navegação verticalmente e o preenchimento ao redor do conteúdo diminuir à medida que a largura da tela diminui.
Agora você construiu um site responsivo simples usando HTML e CSS! Este exemplo cobre os fundamentos da estruturação de uma página da web e do uso de consultas de mídia para criar um design responsivo. À medida que você ganha mais experiência, você pode explorar técnicas avançadas como CSS Grid, Flexbox e imagens responsivas para criar layouts mais complexos e dinâmicos.
Fique atento!!!
Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.
Copyright© 2022 湘ICP备2022001581号-3