O layout responsivo é essencial no design de sites, garantindo que o conteúdo seja exibido corretamente em diferentes dispositivos.
Para criar um layout responsivo com HTML5 e CSS3, siga estas dicas e o exemplo do código abaixo:
Use a tag meta viewport: coloque-a dentro do elemento head do HTML para controlar o dimensionamento do site.
Utilize grids flexíveis:
com a propriedade CSS "display: flex", você pode criar grids ajustáveis.
Aplique Media Queries:
permite adaptar o layout a diferentes tamanhos de tela, definindo regras específicas para dispositivos variados.
Imagens responsivas:
use a propriedade "max-width: 100%" para ajustar imagens automaticamente.
Controle a tipografia:
adapte o tamanho das fontes usando unidades relativas, como "em" ou "rem", facilitando a leitura em diferentes telas.
Essas práticas asseguram um layout responsivo, melhorando a experiência do usuário e a acessibilidade do site.
sua-pagina.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layout Responsivo, HTML5 e CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Layout Responsivo HTML5 & CSS3.">
<link rel="canonical" href="https://www.seusite.com.br/sua-pagina.html">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="container">
<header>Cabeçalho ou (Header)</header>
<nav>Navegação ou (Navigation)</nav>
<main>
<h1>Principal ou (Main)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga esse ipsam, iure delectus ipsa! Corrupti aliquid quia praesentium architecto, vitae perferendis vel! Sunt vero repellendus nihil vitae ullam temporibus fuga.</p>
</main>
<aside>Barra lateral ou (side bar)</aside>
<footer>Rodapé ou (Footer)</footer>
</body>
</html>
style.css
<style>
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}
.container {
display: flex;
flex-direction: column;
min-height: 680px;
}
@media (min-width: 650px) {
.container {
display: grid;
grid-template-columns: 150px 1fr 150px;
grid-template-rows: auto 1fr auto;
}
}
header {
grid-column: span 3;
padding: 20px;
text-align: center;
font-size: 22px;
background-color: #8230C8;
color: white;
}
main {
flex: 1;
padding: 10px;
}
nav {
background-color: #D3ADF0;
padding: 20px;
}
aside {
padding: 20px;
background-color: #F794C5;
}
footer {
grid-column: span 3;
padding: 20px;
text-align: center;
font-size: 20px;
background-color: #58085B;
color: white;
}
h1 {
font-size: 22px;
font-weight: bold;
text-shadow: 1px 4px 3px #777676;
}
p{
border: 1px solid #990000;
padding: 10px;
border-radius: 10px;
}
</style>
Agora só salvar e modificar com desejar:
Comente esta Matéria: