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.
-
Gabinetes
-
Placas-Mãe
-
Processadores
-
Memória
-
Fontes
-
Drives Ópticos
-
Discos Rígidos
-
SSD
-
Placas de Som
-
Placas de Vídeo
Você Sabia?
Inteligência artificial
O primeiro jogo a fazer uso de uma Inteligência Artificial foi o Mouse in the Maze, criado em 1955, na União Soviética. Você pode saber mais sobre ele clicando aqui.
Nintendo Wii
Nos primeiros oito dias após o lançamento do console Nintendo Wii foram vendidas 600 mil unidades. Isso equivale a quase um por segundo e estes incríveis números são referentes às vendas apenas nos EUA!
Tetris
O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.
Final Fantasy
O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.
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.