Pare de pensar em pixels fixos
Um design responsivo de verdade não só salta entre breakpoints: ele também
flui entre eles. Um card com width: 400px sempre mede 400 px, cabendo ou
não; um com width: 90% se molda ao espaço que tiver. Por isso usamos unidades
relativas em vez de px fixos:
%: relativo ao contêiner pai.width: 50%= metade do pai.rem: relativo ao tamanho de fonte raiz (normalmente 16 px). Escala com as preferências do usuário; ideal para tipografia e espaçamento.vw/vh: 1 vw = 1 % da largura do viewport; 1 vh = 1 % da altura.
.columna {
width: 90%; /* flui com o contêiner */
max-width: 60rem; /* mas não cresce sem limite */
margin: 0 auto; /* centralizada */
}
Imagens fluidas
Uma imagem com largura maior que seu contêiner provoca scroll horizontal. A regra de ouro é torná-la fluida:
img {
max-width: 100%; /* nunca mais larga que seu contêiner */
height: auto; /* mantém a proporção */
}
max-width: 100% permite que a imagem encolha em telas pequenas, mas
não estique além do seu tamanho natural. É a base da mídia responsiva.
Tipografia fluida com clamp()
Saltar o tamanho da letra entre breakpoints funciona, mas clamp() permite que
ela flua de forma contínua entre um mínimo e um máximo:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
clamp(MÍNIMO, IDEAL, MÁXIMO) lê-se assim:
- Nunca fica abaixo de
1.5rem(legível no celular). - O valor ideal,
4vw, cresce com a largura da janela. - Nunca passa de
3rem(não se descontrola em telas enormes).
Resultado: um título que se adapta sozinho, sem uma única media query.
Combinar com flex e grid
As unidades fluidas brilham junto com Flexbox e Grid, que já distribuem o espaço disponível. Um padrão muito poderoso para galerias responsivas sem media queries:
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
auto-fit + minmax cria quantas colunas couberem, cada uma de pelo menos
220 px e que dividem o resto (1fr). No celular você verá uma coluna; ao
alargar, surgem duas, três, quatro… sem que você escreva um único breakpoint. O
layout se reorganiza sozinho. Isto é responsivo de nível especialista: deixe o
motor de layout decidir em vez de codificar cada breakpoint na mão.
E com isso você fecha o círculo: viewport para ativar o responsivo, mobile-first para construir do menos para o mais, media queries para os saltos grandes e unidades fluidas para todo o resto. Um site, todas as telas. 🚀