Frontend Academy · Lezione

Media query e sviluppo mobile-first

Scriva breakpoint con media query min-width, costruisca prima il layout mobile e lo migliori progressivamente per gli schermi più grandi.

Media query e sviluppo mobile-first è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Che cosa sono le media query?

Le media query applicano le regole CSS solo quando sono vere determinate condizioni, ad esempio quando la larghezza del viewport supera una soglia. Sono il fondamento del design responsive e consentono a un unico foglio di stile di adattarsi a qualsiasi dimensione dello schermo.

Sintassi di base

Una media query racchiude un blocco CSS in una regola @media. Le regole al suo interno vengono applicate solo quando la condizione corrisponde.

@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

min-width e max-width

min-width: applica gli stili quando il viewport è almeno largo quanto questo valore (approccio mobile-first). max-width: applica gli stili quando il viewport è al massimo largo quanto questo valore (approccio desktop-first). Per lo sviluppo mobile-first, preferisca min-width.

/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }

/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }

Approccio mobile-first

Scriva prima il CSS per gli schermi piccoli (al di fuori di qualsiasi media query). Quindi utilizzi le media query con min-width per aggiungere progressivamente complessità agli schermi più grandi. In questo modo il CSS per gli utenti mobili è più compatto e il codice complessivo più pulito.

.card {
  /* Mobile defaults: single column */
  padding: 16px;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .card {
    /* Tablet enhancement */
    padding: 24px;
    font-size: 1rem;
  }
}

Breakpoint comuni

Scelga i breakpoint in base al contenuto, non a dispositivi specifici. Punti di partenza comuni: 480px (telefoni grandi), 768px (tablet), 1024px (desktop piccoli), 1280px (desktop grandi). Eviti breakpoint destinati a specifici modelli di dispositivo.

Tipi di media

Oltre alla larghezza dello schermo, può selezionare i tipi di media: screen per gli schermi, print per le stampanti. Le media query per la stampa consentono di personalizzare l'aspetto della pagina quando viene stampata, ad esempio nascondendo la navigazione e modificando i colori.

@media print {
  nav, footer, .ads {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
  }
}

Combinare condizioni con and

Combini le condizioni con and: applichi gli stili solo quando entrambe sono vere. Utilizzi not e or per una logica più complessa.

@media (min-width: 768px) and (max-width: 1023px) {
  /* tablets only */
}

@media (orientation: landscape) and (max-width: 767px) {
  /* landscape phones */
}

prefers-color-scheme

Risponda alla preferenza dell'utente per la modalità scura del sistema operativo. Fornisca per impostazione predefinita un tema scuro senza richiedere un interruttore.

@media (prefers-color-scheme: dark) {
  body {
    background: #1a202c;
    color: #f7fafc;
  }
}

prefers-reduced-motion

Rispetti gli utenti che preferiscono meno animazioni, ad esempio a causa di disturbi vestibolari o epilessia. Disabiliti o semplifichi le animazioni all'interno di questa media query.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Container query — il futuro

Le container query (@container) applicano gli stili in base alle dimensioni di un contenitore genitore anziché alla viewport. Consentono una responsività realmente a livello di componente e sono disponibili in tutti i browser moderni dal 2023.

.card-container {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Proprietà logiche per il supporto RTL

Utilizzi proprietà logiche come margin-inline-start anziché margin-left per layout che funzionano sia nelle lingue da sinistra a destra sia in quelle da destra a sinistra. Renda i suoi layout responsive pronti per il futuro.

Verifica rapida

Quale approccio definisce correttamente la strategia CSS mobile-first?

Riepilogo: media query e mobile-first

Utilizzi @media (min-width: N) per un progressive enhancement mobile-first. Scriva gli stili di base per i dispositivi mobili senza query. Aggiunga complessità per gli schermi più grandi. Utilizzi prefers-color-scheme per la modalità scura e prefers-reduced-motion per l'accessibilità. Utilizzi le container query per la responsività a livello di componente.

Domande Frequenti

La lezione «Media query e sviluppo mobile-first» è gratuita?

Sì — il testo completo di «Media query e sviluppo mobile-first» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Media query e sviluppo mobile-first»?

Scriva breakpoint con media query min-width, costruisca prima il layout mobile e lo migliori progressivamente per gli schermi più grandi. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Media query e sviluppo mobile-first»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Frontend Academy