Responsividade e tipografia

Faça a página funcionar no celular: viewport, media queries e tipografia legível.

O que você vai aprender

• Meta viewport
• rem, %, clamp()
• Imagens fluidas
• Breakpoints práticos

1. Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Tipografia fluida

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
p  { font-size: 1rem; max-width: 65ch; }

3. Imagens

img { max-width: 100%; height: auto; display: block; }

Sumário do curso