A Web: HTML e CSS
📱 Design responsivo
Crie interfaces que funcionam em qualquer tela: mobile-first, media queries e unidades fluidas com clamp().
O que você vai aprender
- Ativar a responsividade com a tag
viewporte aplicar a abordagem mobile-first - Adaptar o layout a diferentes larguras com media queries
@media (min-width)e breakpoints - Criar elementos fluidos com
%,rem,vwe imagens que escalam commax-width - Escalar a tipografia de forma fluida com
clamp()
Lições
O problema e a abordagem mobile-firstTelas de todos os tamanhos, a tag viewport e por que começar pelo celular. Media queries e breakpointsA sintaxe @media (min-width), os breakpoints típicos e como se encaixam com mobile-first. Unidades e elementos fluidosPorcentagens, rem e vw; imagens fluidas; tipografia fluida com clamp().Pratique este módulo no app
O DevPath é um curso prático: aqui você lê a teoria; no app você a coloca em prática com exercícios que rodam de verdade, offline.
Comece grátis no app →