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?

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

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.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

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.