Kategorie: Entwicklung
Spickzettel für responsive Breakpoints
Breakpoints über Frameworks hinweg vergleichen oder eigene erstellen
Vergleichen Sie die standardmäßigen Min-width-Breakpoints von Tailwind, Bootstrap, Bulma und Material Design, kopieren Sie fertige Media-Queries für jedes davon, oder geben Sie eigene Breakpoint-Namen und -Breiten ein, um individuelle zu erzeugen.
| Name | Min-width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}Geben Sie pro Zeile einen Namen und eine Breite in Pixel ein, z. B. "md, 768".
| Name | Min-width |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Jedes CSS-Framework wählt eigene Breakpoint-Namen und Pixelbreiten, wodurch es leicht passiert, dass man beim Wechsel zwischen Projekten durcheinanderkommt, welcher wo gilt. Dieses Tool listet die Standardwerte von vier gängigen Frameworks nebeneinander auf und verwandelt jedes davon – oder eine von Ihnen eingegebene eigene Liste – in fertige, einfügbare @media (min-width: …)-Blöcke.
So funktioniert es
- Wählen Sie ein Framework, um dessen Standard-Breakpoints und Media-Queries zu sehen.
- Kopieren Sie das erzeugte CSS für die benötigten Breakpoints.
- Oder listen Sie eigene Breakpoint-Namen und -Breiten auf, um individuelle Queries zu erstellen.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Warum min-width und nicht max-width?
- Ein Mobile-First-Ansatz mit min-width bedeutet, dass die Basisstile den kleinsten Bildschirm ansprechen und jeder Breakpoint Stile für größere hinzufügt, wodurch das hin- und herüberschreiben von Regeln vermieden wird, wie es bei den eigenen Breakpoints des Frameworks sonst nötig wäre.
- Entsprechen diese genau den Framework-Standardwerten?
- Ja, das sind die dokumentierten Standard-Breakpoints jedes Frameworks. Wenn Ihr Projekt eine eigene Tailwind- oder Bootstrap-Konfiguration hat, verwenden Sie stattdessen den Generator für eigene Breakpoints mit den Werten Ihres Projekts.
- Wie formatiere ich die Liste eigener Breakpoints?
- Ein Breakpoint pro Zeile, als Name und Pixelbreite getrennt durch Komma oder Leerzeichen, zum Beispiel "md, 768".