Atualmente as pessoas acessam sites e sistemas utilizando diversos dispositivos, como computadores, tablets e smartphones.
Por esse motivo, uma página web precisa se adaptar automaticamente aos diferentes tamanhos de tela.
Layout responsivo é uma técnica de desenvolvimento web que permite que os elementos de uma página sejam reorganizados conforme o tamanho da tela.
O objetivo é garantir uma boa experiência de navegação em qualquer dispositivo.
| Dispositivo | Características |
|---|---|
| Computador | Tela grande, várias colunas |
| Tablet | Tamanho intermediário |
| Smartphone | Tela pequena, conteúdo vertical |
O navegador identifica o tamanho da tela e aplica regras específicas para reorganizar os elementos.
| Técnica | Descrição |
|---|---|
| Media Queries | Aplicam estilos conforme tamanho da tela |
| Flexbox | Organiza elementos de forma flexível |
| CSS Grid | Cria layouts utilizando linhas e colunas |
| Unidades relativas | Utiliza %, rem, em e vw |
Media Query permite alterar estilos conforme o tamanho da tela.
@media (max-width: 768px) {
body {
font-size: 14px;
}
.menu {
display: block;
}
}
<div class="container">
<div class="card">
Conteúdo 1
</div>
<div class="card">
Conteúdo 2
</div>
</div>
Mobile First é uma metodologia onde o desenvolvimento começa pensando primeiro nos dispositivos móveis.
| Modelo | Resultado |
|---|---|
| Layout Fixo | Página pode quebrar em telas menores |
| Layout Adaptável | Ajusta alguns elementos |
| Layout Responsivo | Adapta toda a interface |