Generatore di media query CSS
Genera blocchi di media query CSS mobile-first o desktop-first dai preset Bootstrap, Tailwind o dai breakpoint personalizzati.
Generatore di media query CSS
Scegli una scala di breakpoint e questo strumento scrive i blocchi @media corrispondenti, pronti per incollare nel tuo foglio di stile. Seleziona i preset Bootstrap o Tailwind per riutilizzare i breakpoint che questi framework includono, o passa a Personalizzato e digita i tuoi valori come elenco separato da virgole o a capo — numeri semplici come "480, 768, 1024" vengono nominati automaticamente, oppure abbina ogni valore a un'etichetta come "tablet:768".
L'output mobile-first si propaga verso l'alto solo con min-width, il modello in cui la maggior parte del CSS dei componenti è scritto oggi; desktop-first si propaga verso il basso solo con max-width, il breakpoint più grande per primo. Attiva la sintassi di intervallo per limitare ogni breakpoint su entrambi i lati — ogni blocco si applica solo dentro quella fascia invece di propagarsi a cascata. Il breakpoint più grande rimane comunque illimitato verso l'alto. Le larghezze vengono stampate in px, em o rem, assumendo la comune dimensione di carattere radice di 16px per la conversione. Quattro interruttori aggiuntivi aggiungono query autonome per orientamento, puntatori in grado di hover, prefers-color-scheme e prefers-reduced-motion, utili quando una pagina ha bisogno di questi controlli insieme ai suoi breakpoint di layout. Cambia il formato di output in SCSS e ogni blocco diventa un @mixin denominato con @content al suo posto, così la tua build Sass può @include dove necessario.
Un elenco di breakpoint che non si risolve in qualcosa di utilizzabile — vuoto, o ogni voce non numerica — viene segnalato chiaramente piuttosto che produrre CSS interrotto; le larghezze duplicate vengono compresse in un blocco, mantenendo il loro primo nome. Gli elenchi personalizzati molto lunghi sono limitati in modo che incollare un valore enorme o malformato non blocchi mai la scheda.
Tutto viene eseguito localmente nel tuo browser — nulla di ciò che digiti viene caricato da nessuna parte. Copia il risultato, scaricalo come file .txt, o invialo direttamente all'input di un altro strumento per continuare a lavorarci.