Ga naar inhoud
TextArray1.87.0
100% lokaal

CSS media query generator

Genereer CSS media query blokken van Bootstrap, Tailwind of aangepaste breakpoints — mobile-first of desktop-first.

Uitvoer
Gerelateerde tools
CSS clamp()-generatorOntwikkelaarstools
CSS-eenheidconverterOntwikkelaarstools
CSS grid generatorOntwikkelaarstools
i18n sleutel diffOntwikkelaarstools
TOML naar JSON-converterOntwikkelaarstools
SQL naar JSONOntwikkelaarstools
CSS media query generator
Kies een breakpoint-schaal en deze tool schrijft de bijbehorende @media-blokken voor u, klaar om in een stylesheet in te voegen. Kies de Bootstrap- of Tailwind-voorinstellingen om de breakpoints die deze frameworks gebruiken opnieuw te gebruiken, of schakel over naar Aangepast en typ uw eigen breedtes als een kommagescheiden of regelgescheiden lijst — bare nummers zoals 480, 768, 1024 krijgen automatisch een naam of koppel elk aan een label zoals tablet:768.
Mobile-first-uitvoer cascade omhoog met alleen min-width, het patroon waarin vandaag de meeste component CSS is geschreven; desktop-first cascade omlaag met alleen max-width, grootste breakpoint eerst. Zet bereiken syntax aan om in plaats daarvan elk breakpoint aan beide zijden te begrenzen — elk blok geldt dan alleen voor die band, met de bovenste band open gelaten. Breedtes printen in px, em of rem, aangenomen dat de gebruikelijke 16px-basislettergrootte voor de conversie. Vier extra schakelaars voegen zelfstandige queries voor oriëntatie, hover-capable pointers, prefers-color-scheme en prefers-reduced-motion toe, nuttig als een pagina deze controles naast zijn layout breakpoints nodig heeft. Schakel het uitvoerformat over naar SCSS en elk blok wordt een benoemd @mixin met @content, zodat uw Sass-build het kan @include waar de regel nodig is.
Een breakpointlijst die oploost tot niets bruikbaars — leeg of elk item niet-numeriek — wordt duidelijk gerapporteerd in plaats van kapotte CSS te produceren; dubbele breedtes worden in één blok samengevouwen, waarbij hun voornaam behouden blijft. Zeer lange aangepaste lijsten worden begrensd, dus het plakken van een enorme of onjuiste waarde vriestde tab nooit in.
Alles draait lokaal in uw browser — niets wat u typt wordt ergens heen geüpload. Kopieer het resultaat, download het als .txt-bestand of stuur het rechtstreeks naar de invoer van een ander tool om ermee door te werken.
FAQ
Wat is het verschil tussen mobile-first en desktop-first hier?
Mobile-first genereert stijgende min-width-only queries (stijlen gelden van die breedte omhoog); desktop-first genereert aflopende max-width-only queries (stijlen gelden onder die breedte), grootste breakpoint eerst.
Wat verandert de bereiken syntax?
Met bereiken syntax aan krijgt elk breakpoint zowel een min-width als een max-width, zodat het blok alleen binnen die band wordt toegepast in plaats van te kaskadieren. Het grootste breakpoint heeft nog steeds geen bovengrens.
Waarom is Tailwinds top breakpoint gelabeld als xl2 in plaats van 2xl?
Een CSS- of SCSS-identifier kan niet met een cijfer beginnen, dus de generator gebruikt xl2 voor die tier — de pixelwaarde (standaard 1536px) is ongewijzigd.
Kan ik mijn eigen breakpoints gebruiken in plaats van een voorinstelling?
Ja. Schakel de voorinstelling over naar Aangepast en voer breedtes in gescheiden door komma's of regelafbrekingen, elk als een bare getal (automatisch benoemd) of naam:waarde, zoals tablet:768.
Wordt mijn breakpointlijst ergens heen geüpload?
Nee. Elke media query wordt volledig in uw browser gegenereerd en verlaat nooit uw apparaat.