Unidades fluidas
Além de media queries, algumas unidades de CSS já se ajustam sozinhas ao tamanho da tela, sem precisar de nenhum bloco condicional.
Estudar esta lição interativa →Media queries mudam o CSS em saltos (abaixo de X, um valor; acima de X, outro). Existe também uma abordagem mais suave: unidades que se recalculam continuamente conforme a tela muda, sem saltos bruscos. A mais versátil delas é a função clamp().
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. clamp(mínimo, ideal, máximo): o tamanho cresce suavemente com a largura da tela (o valor "ideal", aqui em vw), mas nunca sai da faixa mínimo-máximo.
clamp(1.2rem, 4vw, 2.2rem) lê-se assim: "nunca menor que 1.2rem, nunca maior que 2.2rem, e entre esses limites, tente 4vw" (4% da largura da janela). O resultado é um título que cresce suavemente em telas maiores e encolhe suavemente em telas menores, sem nunca ficar ilegível nem gigante demais.
Um cuidado de acessibilidade: o tamanho que depende só de vw não cresce quando a pessoa dá zoom no navegador, porque a largura da janela não mudou, e isso atrapalha quem precisa ampliar o texto. Misture uma parte em rem com a parte em vw, como clamp(1.2rem, 1rem + 2vw, 2.2rem): assim o texto também acompanha o zoom.
Usar só vw sozinho, sem clamp(), pode gerar texto ilegível em telas extremas: minúsculo demais numa tela muito estreita, ou enorme demais numa tela muito larga, já que vw puro não tem piso nem teto. clamp() existe exatamente para dar esses limites de segurança.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Troque para clamp().