Zum Inhalt springen
TextArray1.87.0
100% lokal

CSS-Medienabfrage Generator

Generieren Sie CSS-Medienabfrage-Blöcke aus Bootstrap-, Tailwind- oder benutzerdefinierten Haltepunkten — mobile-first oder desktop-first.

Ausgabe
Verwandte Tools
CSS clamp()-GeneratorEntwickler-Tools
CSS-Einheiten-UmrechnerEntwickler-Tools
CSS Grid GeneratorEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
CSS-Medienabfrage Generator
Wählen Sie eine Haltepunkte-Skala und dieses Tool schreibt die passenden @media-Blöcke für Sie, bereit zum Einfügen in ein Stylesheet. Wählen Sie die Bootstrap- oder Tailwind-Voreinstellungen, um die Haltepunkte dieser Frameworks wiederzuverwenden, oder wechseln Sie zu Benutzerdefiniert und geben Sie Ihre eigenen Breiten als komma- oder zeilengetrennte Liste ein — bare Nummern wie 480, 768, 1024 werden automatisch benannt oder paaren Sie jede mit einer Beschriftung wie tablet:768.
Die mobile-first-Ausgabe wird mit nur min-width nach oben kaskadiert, das Muster, in dem heute die meisten Component-CSS-Code geschrieben werden; desktop-first wird mit nur max-width nach unten kaskadiert, größter Haltepunkt zuerst. Aktivieren Sie Bereichs-Syntax, um jeden Haltepunkt stattdessen auf beiden Seiten zu begrenzen — jeder Block gilt dann nur für diese Stufe, mit der obersten Stufe oben offen gelassen. Breiten drucken in px, em oder rem, angenommen die übliche 16px-Schriftgröße für die Konvertierung. Vier zusätzliche Umschalter fügen eigenständige Abfragen für Orientierung, Schwebefähigkeit, prefers-color-scheme und prefers-reduced-motion hinzu, nützlich wenn eine Seite diese Überprüfungen neben ihren Layouts-Haltepunkten benötigt. Wechseln Sie das Ausgabeformat zu SCSS und jeder Block wird zu einem benannten @mixin mit @content statt, sodass Ihr Sass-Build es @include kann, wo immer die Regel benötigt wird.
Eine Haltepunkte-Liste die in nichts Verwendbares aufgelöst wird — leer oder jeder Eintrag nicht-numerisch — wird klar berichtet, anstatt kaputtes CSS zu erzeugen; doppelte Breiten kollabieren zu einem Block, behalten ihren ersten Namen. Sehr lange benutzerdefinierte Listen werden begrenzt, damit das Einfügen eines großen oder fehlerhaften Werts den Tab nie einfriert.
Alles läuft lokal in Ihrem Browser — nichts was Sie eingeben wird irgendwo hochgeladen. Kopieren Sie das Ergebnis, laden Sie es als .txt-Datei herunter oder senden Sie es direkt an die Eingabe eines anderen Tools, um weiter daran zu arbeiten.
Häufige Fragen
Was ist der Unterschied zwischen mobile-first und desktop-first hier?
Mobile-first generiert aufsteigende nur-min-width-Abfragen (Stile gelten von dieser Breite aufwärts); desktop-first generiert abfallende nur-max-width-Abfragen (Stile gelten unter dieser Breite), größter Haltepunkt zuerst.
Was ändert die Bereichs-Syntax?
Mit aktivierter Bereichs-Syntax erhält jeder Haltepunkt sowohl ein min-width als auch ein max-width, sodass sein Block nur innerhalb dieses Bereichs angewendet wird, anstatt zu kaskadieren. Der größte Haltepunkt hat immer noch keine obere Grenze.
Warum ist Tailwinds oberster Haltepunkt als xl2 statt 2xl gekennzeichnet?
Ein CSS- oder SCSS-Identifikator kann nicht mit einer Ziffer beginnen, daher verwendet der Generator xl2 für diese Stufe — der Pixelwert (1536px standardmäßig) ist unverändert.
Kann ich meine eigenen Haltepunkte statt einer Voreinstellung verwenden?
Ja. Wechseln Sie die Voreinstellung zu Benutzerdefiniert und listen Sie Breiten auf, die durch Kommas oder Zeilenumbrüche getrennt sind, jeweils als bare Nummern (automatisch benannt) oder name:value, wie zum Beispiel tablet:768.
Wird meine Haltepunkte-Liste irgendwo hochgeladen?
Nein. Jede Medienabfrage wird vollständig in Ihrem Browser generiert und verlässt niemals Ihr Gerät.