Generatore di media query CSS (breakpoint)

Generatore di media query CSS (breakpoint): a cosa serve

Le media query fanno cambiare il layout in base allo schermo. Questo generatore crea lo scheletro del CSS con i breakpoint di Bootstrap 5 (576, 768, 992, 1200 e 1400 px), di Tailwind (640, 768, 1024, 1280 e 1536 px), un set semplice o i tuoi.

Scegli mobile-first (min-width), desktop-first (max-width, con la correzione di 0,02 px usata da Bootstrap) o intervalli, in px o em, e aggiungi query per modalità scura, meno movimento, mouse o touch, orientamento, stampa e contrasto alto. Ridimensiona la finestra per vedere quali media query sono attive.

Come si usa

1. Scegli i breakpoint e l’approccio.
2. Seleziona le query extra.
3. Copia o scarica il CSS.

Quando usarlo

• Iniziare il CSS di un nuovo sito.
• Standardizzare i breakpoint del team.
• Imparare come funzionano le media query.

Domande frequenti

Mobile-first o desktop-first?

Mobile-first è il più usato oggi: il CSS di base è quello dello smartphone e ogni min-width aggiunge modifiche per gli schermi più grandi. Così lo smartphone, che di solito ha connessione e processore più deboli, legge meno regole. Il desktop-first (max-width) fa il contrario ed è utile per adattare siti vecchi.

Quali breakpoint usare?

Quelli di Bootstrap 5 sono 576, 768, 992, 1200 e 1400 px; quelli di Tailwind sono 640, 768, 1024, 1280 e 1536 px. Meglio che copiare un framework è mettere il breakpoint dove il tuo layout si rompe, ma entrambi i set sono buoni punti di partenza.

Perché usare em nelle media query?

Nelle media query, 1em vale la dimensione predefinita del carattere del browser (di solito 16 px). Se la persona ha ingrandito il carattere predefinito, i breakpoint in em lo seguono e il layout cambia al punto giusto, cosa che con i px non succede.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili