Responsives Design

Deine Website sollte auf jedem Bildschirm gut aussehen. Im Editor kannst du deine Seiten in Smartphone-, Tablet- und Desktop-Breiten prüfen und Elemente je nach Bildschirmgröße unterschiedlich gestalten.

Andere Bildschirmbreiten prüfen

Klicke auf das Breitenmenü (das Gerätesymbol links neben der Pfadleiste) und wähle eine Breite. Die Arbeitsfläche passt sich an, damit du siehst, wie die Seite auf diesem Bildschirm aussieht.

Option	Breite
Kleines Smartphone	320px
Mobilgerät	375px
Großes Smartphone	425px
Tablet	768px
Desktop	Volle Breite

Du kannst auch D für Desktop, T für Tablet (768px) oder M für Mobilgerät (375px) drücken, solange du gerade keinen Text eingibst.

Wenn du die Breite änderst, ändern sich keine Stile. Nur die Größe der Arbeitsfläche wird angepasst.

Stile je nach Bildschirmgröße

Ein Stil kann ein Präfix für die Bildschirmgröße haben, damit er erst ab dieser Breite gilt.

Präfix	Gilt ab
sm:	640px
md:	768px
lg:	1024px
xl:	1280px

Zum Beispiel sorgt text-2xl md:text-4xl dafür, dass eine Überschrift auf Smartphones kleiner und ab Tablet-Breite größer dargestellt wird.

Wähle dazu das Element aus und öffne den Bereich Erweitert im Bearbeitungsbereich. Gib die Klasse in das Feld Gib eine Klasse ein und drücke Enter ein und drücke Enter. Wechsle dann zwischen den Breiten, um das Ergebnis zu prüfen.

Du kannst die Änderung auch mit eigenen Worten beschreiben. Wähle das Element aus, drücke ⌘K / Ctrl+K und gib zum Beispiel „auf Mobilgeräten ausblenden“ oder „auf Mobilgeräten untereinander anordnen“ ein. Siehe Mit KI bearbeiten.

Elemente auf bestimmten Bildschirmen ausblenden

Füge hidden hinzu, um ein Element überall auszublenden. Füge dann eine Breakpoint-Klasse hinzu, um es ab dieser Breite anzuzeigen:

• hidden md:block blendet es auf Smartphones aus und zeigt es ab Tablet-Breite an.
• md:hidden zeigt es auf Smartphones an und blendet es ab Tablet-Breite aus.