Cosa bisogna specificare in CSS per configurare e applicare questi breakpoint?

Viene utilizzata la query media @media. Al suo interno vengono definite condizioni per applicare gli stili, basate sulle caratteristiche del dispositivo o dell'area di visualizzazione.

Parametri principali delle query media:

• width / height: Larghezza / altezza dell'area di visualizzazione.
• min-width / min-height: Larghezza / altezza minime dell'area di visualizzazione.
• max-width / max-height: Larghezza / altezza massime dell'area di visualizzazione.
• orientation: Orientamento del dispositivo (portrait o landscape).

Esempio di utilizzo per configurare i punti di interruzione:

/* Stili di default per schermi inferiori a 768px */
body {
  font-size: 16px;
}

/* Punto di interruzione per schermi da 768px a 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Punto di interruzione per schermi da 992px in su */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Strategie comunemente usate per definire i punti di interruzione:

1. Mobile First: Si definiscono prima gli stili per gli schermi più piccoli, poi si aggiungono le query con min-width per gli schermi più grandi.
2. Desktop First: Si definiscono prima gli stili per gli schermi grandi, poi si aggiungono le query con max-width per gli schermi più piccoli.

La scelta della strategia dipende dal progetto e dalle preferenze.

Valori standard approssimativi per i punti di interruzione (dipendono dal framework o dall'accordo):

Dispositivo	Intervallo di larghezza	Query media (Mobile First)	Query media (Desktop First)
Piccoli telefoni	< 576px	Non presente (stili di base)	@media (max-width: 575.98px)
Telefoni	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Tablet	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Laptop	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Desktop	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Grandi desktop	>= 1400px	@media (min-width: 1400px)	Non presente (stili di base)

È importante scegliere i punti di interruzione in base al contenuto e al layout, non solo agli standard dei dispositivi. Devono attivarsi dove il layout inizia a 'rompersi'.