CSS media query generator
Generera CSS media query-block från Bootstrap, Tailwind eller anpassade brytpunkter — mobile-first eller desktop-first.
CSS media query generator
Välj en brytpunktsskala och det här verktyget skriver de motsvarande @media-blocken åt dig, klara att klistra in i ett formatmallar. Välj Bootstrap- eller Tailwind-förinställningarna för att återanvända de brytpunkter som dessa ramverk levereras med, eller växla till Anpassat och skriv dina egna bredder som en komma- eller radavgränsad lista — bara siffror som 480, 768, 1024 får automatiskt namn, eller para varje med en etikett som tablet:768.
Mobile-first-utmatning kaskaderar uppåt med endast min-width, mönstret som de flesta komponent-CSS skrivs i idag; desktop-first kaskaderar nedåt med endast max-width, största brytpunkt först. Slå på intervallsyntax för att istället begränsa varje brytpunkt på båda sidor — varje block gäller sedan endast för den nivån, med den översta nivån öppen ovanför. Bredder skrivs ut i px, em eller rem, antar den vanliga 16px rotstorlek för konverteringen. Fyra extra växlar lägger till fristående frågor för orientering, hovring-kompatibla pekare, prefers-color-scheme och prefers-reduced-motion, användbar när en sida behöver dessa kontroller vid sidan av sina layoutbrytpunkter. Byt utdataformat till SCSS och varje block blir ett namngivet @mixin med @content istället, så att din Sass-version kan @include den var som helst regeln behövs.
En brytpunktslista som löser till inget användbara — tom eller varje post icke-numerisk — rapporteras tydligt snarare än att producera bruten CSS; dubblettbredder kollapsas till ett block, vilket behåller deras första namn. Mycket långa anpassade listor begränsas så att inklistring av ett enormt eller felformat värde aldrig fryser fliken.
Allt körs lokalt i din webbläsare — ingenting du skriver laddas upp någonstans. Kopiera resultatet, ladda ner det som en .txt-fil eller skicka det direkt till ett annat verktygs inmatning för att fortsätta arbeta med det.