Gallery responsive
Griglia che passa da 4 colonne a 2 e poi 1.
Adattabilità
Responsive design
Un sito responsive si adatta a desktop, tablet e smartphone. Si usano unità flessibili, layout fluidi e media query.
Teoria rapida
Mobile firstSi parte dagli schermi piccoli.
BreakpointsPunti in cui il layout cambia.
Unità fluide%, fr, rem, vw e clamp.
Esempi interattivi
Modifica il codice e osserva l’anteprima live.
@media
Verifica
Quiz su Responsive design
Rispondi alle domande per controllare subito la comprensione dell’argomento.
1. Che cosa fa una media query?
2. max-width: 600px significa...
3. Mobile first significa...
4. Quale unità è fluida in Grid?
5. A cosa serve clamp()?
6. Un layout responsive migliora...
Esercitazione libera
Laboratorio libero: Responsive design
Parti dagli esempi della pagina, modifica il codice e crea una variante personale. Salva una copia del codice quando ottieni il risultato desiderato.
- Aggiungi un breakpoint a 1200px.
- Cambia la gallery in 3 colonne su tablet.
- Usa clamp() per il titolo.
- Testa il layout riducendo la finestra del browser.