CSS media query generátor
Generujte CSS media query bloky s mobile-first nebo desktop-first přístupem z Bootstrap, Tailwind nebo vlastních breakpointů.
CSS media query generátor
Vyberte breakpoint škálu a tento nástroj vám napíše odpovídající @media bloky, které budete moci přímo vložit do vašeho stylopisu. Vyberte Bootstrap nebo Tailwind presety na opětovné použití breakpointů, které tyto frameworky dodávají, nebo přepněte na Vlastní režim a zadejte své vlastní šířky jako čárkou nebo řádky oddělený seznam — čísla jako "480, 768, 1024" se automaticky pojmenují, nebo můžete každou spárovat se štítkem jako "tablet:768".
Mobile-first výstup kaskáduje nahoru pouze přes min-width, vzor, ve kterém je dnes napsáno většinu CSS komponent; desktop-first kaskáduje dolů pouze přes max-width, s největším breakpointem na prvním místě. Zapněte range syntax, abyste omezili každý breakpoint na obě strany — každý blok se pak aplikuje pouze na tuto úroveň, přičemž nejvyšší tier zůstává otevřený. Šířky se tisknou v px, em nebo rem s předpokladem obvyklé velikosti 16px root fontu. Čtyři další přepínače přidají samostatné dotazy pro orientaci, hover-capable pointery, prefers-color-scheme a prefers-reduced-motion, užitečné, když stránka potřebuje tyto kontroly spolu s breakpointy. Přepněte formát výstupu na SCSS a každý blok se stane pojmenovaným @mixin s @content místo toho, takže vaše Sass build může @include kdekoli je pravidlo potřeba.
Breakpoint seznam, který se vyřeší na nic použitelného — prázdný nebo každý záznam není numerický — se hlásí jasně místo produkce rozbitého CSS; duplicitné šířky se zhroutí na jeden blok, přičemž si ponechají své první jméno. Velmi dlouhé vlastní seznamy jsou omezeny, takže vložení obrovské nebo chybně formátované hodnoty nikdy nezmrazí kartu.
Všechno běží lokálně ve vašem prohlížeči — nic, co zadáte, není nikde nahrávané. Zkopírujte výsledek, stáhněte ho jako .txt soubor nebo ho pošlete přímo na vstup jiného nástroje, abyste s ním mohli pokračovat.