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?
Tetris
Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.
Mario e seu bigode
O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.
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.
Recorde de patentes
A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.
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.










