HomeCasa Prompts

Breakpoint- und Rasterstrategie für eine responsive Website oder App

Lege inhaltsbasierte Breakpoints fest, ein Raster je Breitenbereich, das Verhalten jedes Seitentemplates, Container Queries, responsive Bilder, eine Testmatrix und fertige CSS-Tokens. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 5 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Fortgeschritten · Text · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Handle als Product Designer und Frontend-Entwickler mit Schwerpunkt Responsive Design.

Kontext:
- Produkt oder Website: {{produkt}}
- Wichtigste Seitentemplates: {{templates}}
- Daten zu Geräten und Bildschirmbreiten: {{geraete}}
- Technologie: {{technologie}}
- Priorisierte Inhalte auf kleinen Bildschirmen: {{prioritaet}}

Liefergegenstände:
1. Ansatz: warum Breakpoints sich danach richten sollten, wo der Inhalt bricht, und nicht nach Gerätemodellen, und ob Mobile First sinnvoll ist.
2. Vorschlag von 3-5 Breakpoints mit Begründung, in px und em.
3. Raster je Bereich: Spalten, Gutter, seitliche Ränder und maximale Inhaltsbreite.
4. Verhaltenstabelle je Template und Breakpoint: Navigation, Header, Kartenraster, Tabellen, Formulare, Bilder und Seitenleisten.
5. Komponenten, die Container Queries statt Media Queries nutzen sollten, mit Beispielen.
6. Fluide Typografie und Abstände mit clamp(), abgestimmt auf die Breakpoints.
7. Bilder: srcset und sizes, Art Direction mit picture und moderne Formate.
8. Unterschiede zwischen Touch und Zeigegerät: Media Queries hover und pointer, Größen der Touch-Flächen.
9. Testmatrix: Schlüsselbreiten, 400 % Zoom und Reflow bei 320 CSS-Pixeln (WCAG 1.4.10), Ausrichtung und vergrößerter Text.
10. Tokens und Beispielcode für die genannte Technologie.

Einschränkungen:
- Erfinde keine Analysedaten; fehlen sie, verwende [AUSFÜLLEN: echter Anteil der Besuche je Breite] und erkläre, wie man sie erhebt.
- Priorisiere, was Nutzer mobil brauchen; verstecke nie wesentliche Inhalte.
- Fehlen wichtige Informationen zu den Templates, frage mich zuerst.

Format: nummerierte Überschriften, Tabellen für Raster und Verhalten sowie Codeblöcke.

So verwenden Sie ihn

  1. Nenne deine wichtigsten Templates und, falls vorhanden, echte Daten zu Bildschirmbreiten. 2. Besprich die Verhaltenstabelle mit Design und Entwicklung. 3. Übernimm die Tokens in den Code und arbeite die Testmatrix für jedes Template ab.

Anwendungsbeispiel

Produkt: Website einer Stadthotelkette · Templates: Start, Hotelliste, Hotelseite, Buchung · Technologie: Tailwind · Priorität: Reisedaten und Preis.

Beispielergebnis

1. Ansatz

Mobile First, mit Breakpoints dort, wo der Inhalt bricht (etwa wenn die Hotelkarte nicht mehr in eine Spalte passt), nicht nach Gerätemodellen. Nutzungsdaten: [AUSFÜLLEN: Anteil der Besuche je Bildschirmbreite]; aus dem Analytics-Tool, gruppiert nach Viewport-Breite.

3. Raster

BereichSpaltenGutterRandMax. Breite
< 640 px (40em)416 px16 px100 %
640-1023 px824 px24 px100 %
1024-1279 px1224 px32 px100 %
≥ 1280 px (80em)1232 pxauto1200 px

4. Verhalten der Hotelseite

  • Mobil: Datumsauswahl, Preis pro Nacht und „Buchen" in einer fixierten Leiste unten; nie ausgeblendet.
  • Desktop: Buchungskarte fixiert in der rechten Spalte (4 von 12).

10. Tailwind-Tokens

// tailwind.config.js
module.exports = {
  theme: {
    screens: { sm: '40em', md: '48em', lg: '64em', xl: '80em' },
    container: {
      center: true,
      padding: { DEFAULT: '1rem', sm: '1.5rem', lg: '2rem' },
    },
    extend: { maxWidth: { content: '75rem' } },
  },
};

Breakpoints in em berücksichtigen den Text-Zoom des Browsers…

Wichtige Fakten

Kategorie
UI/UX-Design · Responsive Design
Ausgabetyp
Text
Niveau
Fortgeschritten
Entwickelt für
ChatGPT, Claude, Gemini und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Produkt oder Website, Wichtigste Templates, Gerätedaten, Technologie und Priorisierte Inhalte mobil
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Sollte ich einfach die Breakpoints meines CSS-Frameworks übernehmen?

Sie sind ein guter Ausgangspunkt, sollten aber an die Stellen angepasst werden, an denen dein Inhalt tatsächlich bricht. Der Prompt zeigt, ob die Standardwerte passen oder ob du welche ergänzen oder verschieben musst.

Was sind Container Queries und wann setzt man sie ein?

Mit ihnen reagiert eine Komponente auf die Breite ihres Containers statt auf die des Bildschirms. Das ist nützlich für Karten oder Widgets, die in unterschiedlich breiten Spalten vorkommen.

Wofür ist dieser Prompt gedacht?

Lege inhaltsbasierte Breakpoints fest, ein Raster je Breitenbereich, das Verhalten jedes Seitentemplates, Container Queries, responsive Bilder, eine Testmatrix und fertige CSS-Tokens.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Produkt oder Website, Wichtigste Templates, Gerätedaten, Technologie und Priorisierte Inhalte mobil). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Fortgeschrittene: Es hilft, das Thema zu kennen, um guten Kontext zu liefern und das Ergebnis kritisch zu prüfen.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts