Hoje, as pessoas acessam sites por celulares, tablets, notebooks, monitores grandes e até TVs.
Design responsivo é a prática de adaptar o layout para funcionar bem em qualquer tamanho de tela.
O que é design responsivo?
Design responsivo significa que o layout:
- Se ajusta automaticamente ao tamanho da tela
- Mantém legibilidade e usabilidade
- Evita rolagem horizontal
A mudança de mentalidade
Antigamente, os sites eram pensados apenas para desktop.
Hoje, a abordagem moderna é:
- Mobile first — pensar primeiro no celular
- Depois adaptar para telas maiores
Layouts fluidos
Layouts responsivos evitam tamanhos fixos sempre que possível.
Em vez disso, usam:
- Porcentagens
- Unidades flexíveis
- Grid e Flexbox
.container { max-width: 1200px; margin: 0 auto; padding: 16px; } Esse padrão centraliza o conteúdo e se adapta à largura da tela.
Conteúdo antes do layout
Em telas pequenas, o mais importante é:
- Texto legível
- Botões clicáveis
- Navegação simples
Responsividade com Flexbox e Grid
Flexbox e Grid foram criados já pensando em responsividade.
Exemplo com Flexbox:
.cards { display: flex; flex-wrap: wrap; gap: 16px; } Os elementos se reorganizam conforme o espaço disponível.
Erros comuns em layouts não responsivos
- Usar largura fixa para tudo
- Ignorar telas pequenas
- Texto muito pequeno
- Elementos muito próximos
Responsivo não é só CSS
Embora o CSS seja a base, design responsivo envolve:
- HTML bem estruturado
- Conteúdo pensado para leitura
- Boas decisões de design
CSS apenas viabiliza essas escolhas.
💾🧠 Resumo da aula para nunca mais esquecer
- Design responsivo adapta o layout a diferentes telas
- Mobile first é a abordagem moderna
- Layouts fluidos evitam tamanhos fixos
- Flexbox e Grid facilitam responsividade
- Responsividade começa no planejamento
Na próxima aula, vamos aprender sobre media queries — a ferramenta que permite aplicar estilos conforme o tamanho da tela 📐📱
HARDWARE
Entendendo o seu computador
O que há dentro do meu computador?
Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.
Você Sabia?
Ábaco
O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.
Space Invaders
O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.
Muitos aplicativos
Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.
Mario em Donkey Kong
O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.
Space Invaders
A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.










