CSS media query generátor
Generujte CSS media query bloky s mobile-first alebo desktop-first prístupom z Bootstrap, Tailwind alebo vlastných breakpointov.
CSS media query generátor
Vyberte breakpoint škálu a tento nástroj vám napíše zodpovedajúce @media bloky, ktoré budete môcť priamo vložiť do svojho štýlopisu. Vyberte Bootstrap alebo Tailwind presety na opätovné použitie breakpointov, ktoré tieto frameworky dodávajú, alebo prepnite na Vlastný režim a zadajte svoje vlastné šírky ako čiarkou alebo riadkami oddelený zoznam — čísla ako "480, 768, 1024" sa automaticky pomenujú, alebo môžete každú párovať so štítkom ako "tablet:768".
Mobilný-first výstup kaskáduje nahor len cez min-width, vzor, v ktorom je dnes napísané väčšinu CSS komponentov; desktop-first kaskáduje nadol len cez max-width, s najväčším breakpointom na prvom mieste. Zapnite range syntax, aby ste ohraničili každý breakpoint na obidve strany — každý blok sa potom aplikuje len na túto úroveň, pričom najhorný tier zostáva otvorený. Šírky sa tlačia v px, em alebo rem s predpokladom obvyklej veľkosti 16px root fontu. Štyri ďalšie prepínače pridajú samostatné queries pre orientáciu, hover-capable pointery, prefers-color-scheme a prefers-reduced-motion, užitočné, keď stránka potrebuje tieto kontroly spolu s breakpointmi. Prepnite formát výstupu na SCSS a každý blok sa stane pomenovaným @mixin s @content namiesto toho, takže váš Sass build môže @include kdekoľvek je pravidlo potrebné.
Breakpoint zoznam, ktorý sa rieši na nič použiteľné — prázdny alebo každý záznam nie numerický — sa hlási jasne namiesto produkcie rozbitého CSS; duplicitné šírky sa zrúšia na jeden blok, pričom si ponechajú svoje prvé meno. Veľmi dlhé vlastné zoznamy sú obmedzené, takže vloženie obrovskej alebo chybne formátovanej hodnoty nikdy nezmrazí kartu.
Všetko beží lokálne vo vašom prehliadači — nič, čo zadáte, nie je nikde nahrané. Skopírujte výsledok, stiahnite ho ako .txt súbor alebo ho pošlite priamo na vstup iného nástroja, aby ste s ním mohli pokračovať.