Responsive Viewport Tool
Finde heraus, in welche Geräteklasse deine Content-Breite fällt, mit gängigen Breakpoints, um dein Layout zielgerichtet zu optimieren. DSGVO-konform.
Deine Eingaben werden in deinem Browser verarbeitet und nicht an unsere Server übertragen. Hinweis: Drittanbieter-Ressourcen (z. B. Werbung und Analyse von Google/Cloudflare) sowie ein freiwilliger PayPal-Spendenlink können beim Laden bzw. Anklicken Daten übertragen. Browser-Erweiterungen oder -Plugins können sichtbare Inhalte in den Eingabefeldern mitlesen.
Ergebnis erscheint hier …
Video: So nutzt du dieses Tool
Das Video wird von YouTube gehostet. Beim Abspielen können Daten an Google übertragen werden.
Responsive Viewport Tool
Das Responsive Viewport Tool zeigt, in welche Geräteklasse deine Content- oder Container-Breite fällt. Es nutzt die Breakpoints von Bootstrap und Tailwind oder deine eigenen Werte und erzeugt passende Media Queries.
Welche Geräteklasse passt zu meiner Breite?
Gib die Breite deines Containers ein, zum Beispiel 768 Pixel. Das Tool ordnet diese Breite einer Geräteklasse zu, etwa Smartphone, Tablet oder Desktop, und nennt den passenden Breakpoint-Bereich.
Bootstrap und Tailwind Breakpoints
Je nach Framework gelten andere Breakpoints. Bootstrap 5 nutzt 576, 768, 992, 1200 und 1400 Pixel, Tailwind 640, 768, 1024, 1280 und 1536 Pixel. Das Tool stellt beide Systeme bereit und markiert die passende Stufe.
Eigene Breakpoints verwenden
Für eigene Systeme gibst du die Breakpoints einfach selbst ein. Das Tool erzeugt daraus eine mobile-first Media Query sowie eine Zielbereich-Query für deine ausgewählte Breite.
Häufige Fragen
Welche Geräteklasse passt zu meiner Breite?
Gib die Breite deines Containers ein, zum Beispiel 768 Pixel. Das Tool ordnet diese Breite einer Geräteklasse zu, etwa Smartphone, Tablet oder Desktop, und nennt den passenden Breakpoint-Bereich.
Welche Breakpoints verwendet Bootstrap?
Bootstrap 5 nutzt die Stufen 576, 768, 992, 1200 und 1400 Pixel. Das Tool stellt dieses System bereit und markiert die Stufe, die zu deiner eingegebenen Breite passt.
Welche Breakpoints verwendet Tailwind?
Tailwind nutzt die Stufen 640, 768, 1024, 1280 und 1536 Pixel. Auch hierfür liefert das Tool die passende Einordnung für deine Breite.
Kann ich eigene Breakpoints eingeben?
Ja. Für eigene Systeme gibst du die Breakpoints einfach selbst ein. Das Tool erzeugt daraus die passende Media Query für deine ausgewählte Breite.
Was ist eine mobile-first Media Query?
Eine mobile-first Media Query definiert die Basis-Styles zuerst und fügt ab einem bestimmten Breakpoint weitere Styles hinzu. Das Tool erzeugt diese Form sowie eine Zielbereich-Query für deine Breite.
Werden meine Werte übertragen?
Nein. Alle Berechnungen laufen direkt in deinem Browser. Deine Werte werden nicht an unseren Server übertragen oder gespeichert.