CSS media query generator
Generiraj CSS media query bloke za Bootstrap, Tailwind ali prilagojene breakpoints — mobile-first ali desktop-first pristop.
CSS media query generator
Izberi lestvico breakpointov in to orodje génériše ustrezne @media bloke, pripravljene za kopiranje v slog. Izberi Bootstrap ali Tailwind predloge za ponovna uporabo breakpointov, ki jih uporabljajo ti ogrodja, ali prebrci na Prilagojeno in vnesi lastne širine kot vejico- ali vrstico-ločene seznam — goli številki kot "480, 768, 1024" se samodejno poimenovajo, ali spari vsakega z oznako kot "tablet:768".
Mobile-first izhod se kaskadira navzgor s samo min-width, vzorec, ki se dandanes uporablja za večino component CSS; desktop-first se kaskadira navzdol s samo max-width, največji breakpoint prvi. Vključi range syntax, da omejiš vsak breakpoint na obeh straneh — vsak blok se nato uporabi samo na tej stopnji, s spletno stopnjo odprto zgoraj. Širine se natisnejo v px, em ali rem, ob predpostavki skupne velikosti 16px korenskega fonta za pretvorbo. Štiri dodatni spakli dodajo samostojne poizvedbe za orientation, hover-capable pointers, prefers-color-scheme in prefers-reduced-motion, uporabno, kadar stran potrebuje te preverjalnike skupaj s svojimi layout breakpoints. Prebaci obliko izhoda na SCSS in vsak blok postane poimenovan @mixin s @content namesto tega, zato tvoja Sass gradnja lahko @include tam, kje je pravilo potrebno.
Seznam breakpointov, ki se razrešuje v ničesar uporabnega — prazno, ali vsak vnos ne-numeričen — je jasno poročan namesto izdelave prekinjenega CSS-a; podvojene širine se zvrnejo v en blok, pri čemer ohranijo njihovo prvo ime. Zelo dolgi prilagojeni seznami so omejeni, tako da lepljenje velike ali slabo oblikovane vrednosti nikoli ne zamrzne zavihka.
Vse se izvaja lokalno v tvojem pregledniku — ničesar, kar vpišeš, se ne pošlje nikamor. Kopiraj rezultat, prenesi ga kot .txt datoteko, ali ga pošlji neposredno vhodu drugega orodja, da nadaljuješ z delom nanj.