Grundlagen

Auf allen Bildschirmgrößen prüfen

Im Editor zwischen Desktop, Tablet, Smartphone und freier Breite wechseln.

Eine Website muss auf dem großen Monitor genauso gut aussehen wie auf dem Smartphone. Im Editor kannst du die Seite in verschiedenen Breiten ansehen, ohne das Gerät zu wechseln.

Ansicht wechseln

Oben in der Leiste des Editors findest du vier Knöpfe:

	Knopf	Zeigt die Seite
	Desktop	in der vollen Breite des Arbeitsbereichs
	Tablet	so breit wie ein Tablet
	Smartphone	so breit wie ein Smartphone
	Frei	in jeder beliebigen Breite (nur für Designer und Administratoren)

Leiste des Editors mit den Knöpfen Desktop, Tablet, Smartphone und Frei — Die Knöpfe für die Ansicht oben im Editor

Editor in der Ansicht Tablet: die Seite schmaler in der Mitte, Symbol Tablet oben hervorgehoben — Ansicht Tablet

Editor in der Ansicht Smartphone: Header und Tabelle in schmaler Breite — Ansicht Smartphone – hier bricht der Header schon in zwei Zeilen um

Freie Breite

Klicke auf Frei. Die Ansicht startet mit der Breite, die gerade zu sehen ist.
Über der Vorschau erscheint ein Lineal mit den Bildschirmgrößen der Website. Ein Klick auf einen Abschnitt zeigt genau diese Größe.
Ziehe den Griff am rechten Rand, um die Breite stufenlos zu ändern. Er rastet an den Grenzen der Bildschirmgrößen ein. Du kannst die Breite auch als Zahl eintippen.
Ein Klick auf Desktop, Tablet oder Smartphone beendet die freie Ansicht.

Die Abschnitte des Lineals tragen kurze Namen der Bildschirmgrößen (vom kleinsten „base“ für Smartphones bis „2xl“ für sehr große Monitore). Rechts im Lineal steht die aktuelle Breite in Pixeln.

Editor in der freien Ansicht: Breite 1012 Pixel als Zahl, darüber das Lineal mit den Abschnitten der Bildschirmgrößen — Freie Breite mit Lineal

Ist die gewählte Breite größer als dein Bildschirm, wird die Seite verkleinert dargestellt – sie verhält sich trotzdem wie in der echten Breite.

Tipp

Prüfe nach jeder größeren Änderung an Schriftgrößen oder Abständen die schmalste und die breiteste Ansicht. Gerade lange Überschriften brechen auf dem Smartphone oft anders um als gedacht.

Bewegungen und Effekte laufen im Editor nicht. Um sie zu sehen, öffne die Seite in der Vorschau oder auf der Website.