CSS media query generator
Generiraj CSS media query blokove za Bootstrap, Tailwind ili prilagođene breakpoints — mobile-first ili desktop-first pristup.
CSS media query generator
Odaberi skalu breakpointa i ovaj alat generiše odgovarajuće @media blokove spremne za kopiranje u stylesheet. Odaberi Bootstrap ili Tailwind presets za reupotrebe breakpoints koje koriste ti framework-ovi, ili prebaci na Custom i unesi vlastite širine kao zarez- ili liniju-odvojenu listu — obični brojevi kao "480, 768, 1024" se automatski nazivaju, ili upauj svaki sa oznakom kao "tablet:768".
Mobile-first isklop se kaskadira prema gore sa min-width samo, šarom koja se koristi za većinu component CSS-a danas; desktop-first se kaskadira prema dolje sa max-width samo, najveći breakpoint prvi. Uključi range syntax da ograničiš svaki breakpoint sa obe strane — svaki blok se tada primenjuje samo na taj nivo, sa gornjim nivoom otvoren gore. Širine se ispisuju u px, em ili rem, pretpostavljajući uobičajenu 16px veličinu root fonta za konverziju. Četiri dodatna dugmeta dodaju zasebne queries za orientation, hover-capable pointers, prefers-color-scheme i prefers-reduced-motion, korisno kada stranica treba ta proveravanja pored layout breakpoints. Prebaci format isklopa na SCSS i svaki blok postaje imenovan @mixin sa @content umesto toga, pa tvoj Sass build može @include ga gde god je pravilo potrebno.
Lista breakpointa koja se razrešava u ništa upotrebljivo — prazno, ili svaki unos ne-numerički — je jasno prijavljen umesto proizvodnje slomljenog CSS-a; duplikate širine se rušE u jedan blok, čuvajući njihovo prvo ime. Vrlo dugačke prilagođene liste su ograničene tako da lepljenje ogromne ili loše formirane vrednosti nikad ne zamrzava karticu.
Sve se pokreće lokalno u tvom pregledniku — ništa što upišeš se ne šalje nikuda. Kopiraj rezultat, preuzmi ga kao .txt datoteku, ili ga pošalji direktno ulazu drugog alata da nastaviš sa radom na njemu.