• Startseite
• Inhalt
• Index
• Quellen

Breakpoints - Bilder neu

Um dynamische responsive Websites zu erstellen, verfügt RocketCake über einen eingebauten Editor zum Erstellen und Ändern von Haltepunkten.

Was ist ein Haltepunkt?

Ein Breakpoint ist einfach eine Größe des Bildschirms, die dazu führt, dass sich bestimmte Elemente auf Ihrer Website ändern: Sie können erscheinen, verschwinden, ihre Schriftgröße ändern oder ähnliches. Dies ist sehr nützlich, um genau zu kontrollieren, wie die Website auf verschiedenen Geräten aussieht.

Ein Beispiel: Wenn Ihre Website von einem Computer mit einem großen Bildschirm aus betrachtet wird, zeigen Sie viele Bilder. Aber diese Bilder sind nicht sehr informativ und sind nur im Weg, wenn sie von einem Gerät mit einem sehr kleinen Bildschirm aus betrachtet werden. Es wäre also schön, diese Bilder auszublenden, wenn der Bildschirm klein ist. Mit einem Haltepunkt können Sie zum Beispiel sagen: "Wenn der Bildschirm kleiner als 480 Pixel ist, dann zeige diese Bilder nicht an". Das war's.

Wie man einen BreakPoint erstellt

Mit RocketCake ist es sehr einfach, einen Breakpoint zu erstellen. Als Beispiel nehmen wir eine Website und lassen ein Bild verschwinden, wenn die Website auf einem Gerät mit einer Bildschirmbreite kleiner als 320 Pixel angezeigt wird:

Auf einer normalen Bildschirmgröße sieht es gut aus. Wenn die Größe auf eine geringere Breite reduziert wird, wie hier:

Es wäre schön, wenn Sie das Bild mit den Stiften ausblenden könnten, um mehr Platz zu haben. Klicken Sie dazu einfach mit der rechten Maustaste auf das Bild mit den Stiften und wählen Sie "Haltepunkte bearbeiten".

Daraufhin wird der Haltepunkt-Editor angezeigt. Gehen Sie wie folgt vor:

Fügen Sie einen neuen Haltepunkt hinzu, indem Sie auf das '+'-Zeichen klicken.

Geben Sie als Breite '320' ein.

Klicken Sie auf die Schaltfläche "Hinzufügen...", um eine neue Regel hinzuzufügen.

Wählen Sie "Sichtbar".

Deaktivieren Sie das Kontrollkästchen, um das Element unsichtbar zu machen.

Das Ergebnis sollte wie folgt aussehen:

Wenn Sie nun die Website mit einer Bildschirmbreite von weniger als 320 Pixeln betrachten, wird das Bild nicht sichtbar sein. Sie können dies auch in RocketCake sehen. Wenn Sie den Schieberegler am unteren Rand der Seite auf eine größere Größe verschieben, wird das Bild wieder angezeigt:

Sie können so viele Haltepunkte pro Element haben, wie Sie möchten. Sie können damit die Schriftgröße, Position, Breite und andere Eigenschaften ändern.

Wenn Sie Haltepunkte in Ihrer Website verwenden möchten, sollten Sie beachten, dass es folgendermaßen funktioniert: Entwerfen Sie die Website mit der größten unterstützten Auflösung im Hinterkopf. Mit Hilfe der Haltepunkte können Sie dann Änderungen an Ihrer Website für kleinere Bildschirmgrößen vornehmen. Wenn Sie jedoch überhaupt keine Haltepunkte verwenden möchten, ist das auch in Ordnung. Wenn es ohne geht, ist das sogar noch besser.