Categoria: Sviluppo
Cheatsheet dei Breakpoint Responsive
Confronta i breakpoint tra i framework, o costruisci i tuoi
Confronta i breakpoint min-width predefiniti usati da Tailwind, Bootstrap, Bulma e Material Design, copia media query già pronte per uno qualsiasi di essi, oppure inserisci i tuoi nomi e larghezze di breakpoint personalizzati per generarne di nuove.
| Nome | Min-width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}Inserisci un nome e una larghezza in pixel per riga, ad esempio "md, 768".
| Nome | Min-width |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
Ogni framework CSS sceglie i propri nomi e larghezze in pixel per i breakpoint, il che rende facile confondersi su quale si applichi dove quando si passa da un progetto all'altro. Questo strumento elenca i valori predefiniti di quattro framework comuni fianco a fianco e trasforma uno qualsiasi di essi — o un elenco personalizzato che digiti — in blocchi @media (min-width: …) pronti da incollare.
Come si usa
- Scegli un framework per vedere i suoi breakpoint predefiniti e le relative media query.
- Copia il CSS generato per i breakpoint che ti servono.
- Oppure elenca i tuoi nomi e larghezze di breakpoint personalizzati per costruire media query su misura.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Perché min-width e non max-width?
- Un approccio mobile-first basato su min-width fa sì che gli stili di base puntino allo schermo più piccolo e ogni breakpoint aggiunga stili per schermi più grandi, evitando di sovrascrivere regole avanti e indietro come farebbero i breakpoint propri del framework.
- Questi corrispondono esattamente ai valori predefiniti del framework?
- Sì, sono i breakpoint predefiniti documentati di ciascun framework. Se il tuo progetto ha una configurazione personalizzata di Tailwind o Bootstrap, usa invece il costruttore di breakpoint personalizzati con i valori del tuo progetto.
- Come formatto l'elenco di breakpoint personalizzati?
- Un breakpoint per riga, come un nome e una larghezza in pixel separati da una virgola o uno spazio, ad esempio "md, 768".