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?
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.
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!
PDP-1
O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.
Computadores de 1,5 tonelada
Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.
Mouse
O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.