Design Responsive
Impara a creare siti web che si adattano perfettamente a tutti i dispositivi utilizzando media queries, breakpoints e approccio mobile-first.
Breakpoints comuni
Media Query per Mobile
@media only screen and (max-width: 600px) {
/* Stili per mobile */
}Esempi pratici
Anteprima Responsive
Cambia breakpoint per vedere come si adatta il layout
Card 1
Contenuto che si adatta al dispositivo
Card 2
Contenuto che si adatta al dispositivo
Card 3
Contenuto che si adatta al dispositivo
Card 4
Contenuto che si adatta al dispositivo
Card 5
Contenuto che si adatta al dispositivo
Card 6
Contenuto che si adatta al dispositivo
Codice Esempio
Visualizza HTML, CSS e JS (se presente)
<div class="container">
<div class="grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
</div>Best Practices
- Usa approccio mobile-first
- Testa su dispositivi reali
- Usa unità relative (rem, %, vw)
- Ottimizza immagini per ogni dispositivo
Errori comuni
- Dimenticare il viewport meta tag
- Usare breakpoint troppo specifici
- Non testare su touch devices
- Ignorare la performance su mobile
⚠️ Non dimenticare il Viewport Meta Tag!
Aggiungi sempre questo tag nel <head> del tuo HTML per il responsive design:
<meta name="viewport" content="width=device-width, initial-scale=1.0">💡 Approccio Mobile-First
Inizia sempre dal mobile e poi espandi:
- Scrivi gli stili base per mobile (senza media query)
- Aggiungi media query per tablet (min-width: 768px)
- Aggiungi media query per desktop (min-width: 1024px)
- Testa su dispositivi reali, non solo nel browser
Questo approccio garantisce che il tuo sito funzioni sempre, anche se i CSS non si caricano completamente.