Einführung in responsives Design - Webflow Hilfe
Erfahren Sie, wie das Umfließen von Inhalten, feste Größen, relative Größen und Breakpoints (Media Queries) helfen, responsive Designs zu erstellen.
Wenn Sie eine Website auf Ihrem mobilen Gerät besuchen, sehen Sie möglicherweise eine Desktop-Version der Website, die in einen kleineren Bildschirm gequetscht ist, was Sie zwingt, zu zoomen und zu schwenken, um Inhalte zu sehen. Sie könnten auch auf einer abgespeckten mobilen Version landen, die den Inhalt und die Erfahrung vermissen lässt, die die Desktop-Version überlegen macht. Hoffentlich sehen Sie jedoch eine responsive Website – ein Design, das Inhalte basierend auf der Breite des Browsers umfließt und neu positioniert.
Es gibt drei verschiedene Aspekte des responsiven Designs, die wir hier behandeln werden:
- Umfließen von Inhalten
- Feste Größen
- Relative Größen
- Breakpoints (Media Queries)
Umfließen von Inhalten
Das Umfließen von Inhalten bezieht sich auf Inhalte, die ihre Breite basierend auf der Breite des Browser-Viewports anpassen. Ein Absatz mit Standardeinstellungen wird beispielsweise automatisch seinen Inhalt umschließen, wenn die Breite des Browsers kleiner wird. Dieses Verhalten kann simuliert werden, indem man den Rand der Designer-Leinwand zieht.
Feste Größen
Relative Größen
Dies bezieht sich darauf, die Größe eines Elements relativ zu anderen Dingen wie der Browserbreite oder einem übergeordneten Element festzulegen. Anstatt beispielsweise eine pixelbasierte Größe für ein Bild zu verwenden, sollten Sie andere Einheiten wie %, VW (Viewport-Breite) oder VH (Viewport-Höhe) in Betracht ziehen. Wenn Sie % auf ein Bild anwenden und die Browserbreite anpassen, können Sie sehen, dass es sich entsprechend anpasst, während ein px-basiertes Bild dies nicht tut.
Breakpoints
Layouts sind in der Regel viel komplexer als die Verwaltung der Breite eines Bildes. Die Verwendung von Breakpoints (auch bekannt als Media Queries) ermöglicht es Ihnen nicht nur, das Umfließen von Inhalten zu testen, sondern auch das Design und Layout basierend auf verschiedenen Gerätebreitenbereichen zu ändern.
Erfahren Sie mehr: