CSS Media Query Builder - Responsive Breakpoints Generator

CSS-Media-Queries für responsives Webdesign visuell erstellen und generieren

CSS-Werkzeuge

Tool

BreakpointQuery TypeMedia Type

CSS Rules

Generated CSS

@media screen and (min-width: 768px) {
  .container {
    padding: 1rem;
  }
}

Live Preview

Resize your browser to see the breakpoint at ≥ 768px

320px

480px

768px

1024px

1280px

Highlighted widths fall within the media query range.

Anleitung

1Medientyp auswählen (screen, print, all)
2Ein Breakpoint-Preset auswählen oder benutzerdefinierte Min./Max.-Breitenwerte eingeben
3Die CSS-Regeln hinzufügen, die innerhalb der Media Query gelten sollen
4Den generierten Media-Query-Code kopieren

Häufig gestellte Fragen

CSS-Media-Queries ermöglichen es, unterschiedliche Stile basierend auf Geräteeigenschaften wie Bildschirmbreite, -höhe oder Ausrichtung anzuwenden. Sie bilden die Grundlage des responsiven Webdesigns.

Gängige Breakpoints sind 320px (kleines Mobilgerät), 480px (Mobilgerät), 768px (Tablet), 1024px (Laptop) und 1280px (Desktop). Es können auch die Breakpoints beliebter Frameworks wie Tailwind CSS oder Bootstrap verwendet werden.