Generator de CSS media queries
Generați blocuri de media queries CSS mobile-first sau desktop-first din breakpoints Bootstrap, Tailwind sau personalizate.
Generator de CSS media queries
Alegeți o scară de breakpoints și acest instrument scrie blocurile @media corespunzătoare, gata de lipit într-o foaie de stil CSS. Folosiți preset-urile integrate Bootstrap sau Tailwind pentru a reutiliza breakpoints-urile pe care le oferă aceste framework-uri, sau comutați la Personalizat și introduceți propriile lățimi cum ar fi "480, 768, 1024" — opțional cu etichete descriptive cum ar fi "tablet:768" pentru mai bună organizare.
Ieșirea mobile-first folosește doar min-width, standardul modern al dezvoltării responsive; desktop-first folosește doar max-width, începând cu cel mai mare breakpoint. Activați sintaxa de interval (min și max) pentru a limita fiecare breakpoint pe ambele laturi, aplicând stiluri doar în acel interval specific. Lățimile se convertesc în px, em sau rem, presupunând rădăcina de 16px. Patru comutări suplimentare permit adăugarea de interogări independente pentru orientarea dispozitivului, capacitatea de hover, prefers-color-scheme și prefers-reduced-motion. Comutați formatul de ieșire la SCSS și fiecare bloc devine un @mixin numit cu @content.
O listă goală sau care conține doar valori nenumerice este raportată clar, niciodată nu produce CSS rupt sau nevalid. Lățimile duplicate se prăbușesc automat la un singur bloc, păstrând primul nume. Listele foarte lungi sau malformate sunt limitate pentru a asigura că tab-ul nu îngheață niciodată.
Tot funcționează local în browserul dvs. — nimic nu este trimis pe vreun server. Copiați rezultatul cu un singur clic, descărcați ca fișier .txt, sau trimiteți direct unui alt instrument TextArray pentru a continua lucrul.