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
Um site responsivo não é “uma versão mobile”. É o mesmo site se adaptando.

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
Ignorar mobile hoje significa perder usuários.

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
Se funciona bem no celular, funciona em qualquer lugar.

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
Responsividade não é ajuste final. Ela faz parte do projeto desde o início.

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?

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.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Mega Man

A primeira versão do clássico Mega Man, para Nintendo 8 bits, tem seu recorde de pontos estabelecido em 03/11/2006, por David Archey, que cravou 2.396.700 pontos, terminando o jogo.

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.