So verwenden Sie CSS-Breakpoints, um responsive Designs zu erstellen

Der Erfolg einer Website hängt stark von der Benutzererfahrung ab. Heutzutage greifen Benutzer von vielen verschiedenen Geräten aus auf eine Website zu, und es kann eine Herausforderung sein, auf allen Geräten ein gleiches Benutzererlebnis zu bieten. Hier können CSS-Breakpoints nützlich sein.

CSS-Breakpoints können sehr nützlich sein, um reaktionsschnelle Websites zu erstellen, die auf jedem Gerät eine großartige Benutzererfahrung bieten, aber sie bleiben auch einer der verwirrenderen Aspekte des Webdesigns, insbesondere für neue Entwickler.

Lass uns anfangen!

Was ist ein CSS-Haltepunkt?

CSS-Haltepunkte sind Punkte, an denen der Website-Inhalt entsprechend der Gerätebreite reagiert, sodass Sie dem Benutzer das bestmögliche Layout anzeigen können.

CSS-Haltepunkte werden auch als Medienabfrage-Haltepunkte bezeichnet, da sie mit Medienabfragen verwendet werden.

In diesem Beispiel sehen Sie, wie sich das Layout an die Bildschirmgröße anpasst. Das Layout bei hoher Auflösung hat ein Header- und zweispaltiges Body-Layout, aber bei einem kleinen Gerät wird es zu einem einspaltigen Layout.

So setzen Sie CSS-Haltepunkte

Der knifflige Teil besteht darin, die Haltepunkte selbst zu bestimmen. Es gibt keine Standardvorlagen und unterschiedliche Frameworks verwenden unterschiedliche Breakpoints.

Welchen Ansatz sollten Sie also für Ihre Breakpoints wählen?

Es gibt zwei wahrscheinliche Vorgehensweisen:

• Haltepunkte basierend auf dem Gerät
• Haltepunkte basierend auf Inhalt

CSS-Haltepunkte basierend auf dem Gerät

Das Festlegen von Breakpoints basierend auf verschiedenen Geräten klingt nach einer guten Idee, ist aber in Wirklichkeit nicht immer der beste Ansatz. Wir haben bereits genug Geräte, um die wir uns Sorgen machen müssen, und wenn ein neues mit einer anderen Breite herauskommt, ist es zeitaufwändig, zu Ihrem CSS zurückzukehren und erneut einen neuen Haltepunkt hinzuzufügen.

Nichtsdestotrotz ist es immer noch eine praktikable Option, da Sie vielleicht feststellen, dass das für Sie in Ordnung ist. Hier ist ein Beispiel für gerätespezifische Haltepunkte:

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

Mit diesem Ansatz erhalten Sie am Ende eine riesige Liste von Medienanfragen.

CSS-Breakpoints basierend auf Inhalt

Die ideale Option zum Festlegen von Haltepunkten basiert auf dem Inhalt Ihrer Website. Mit dieser Methode können Sie einfach Haltepunkte hinzufügen, wo Ihr Inhalt Layoutanpassungen benötigt. Dadurch wird Ihre Medienabfrage viel einfacher und überschaubarer.

Dieser Haltepunkt bedeutet, dass das CSS angewendet wird, wenn die Gerätebreite 768 Pixel und mehr beträgt.

 [css]@media only screen (min-width: 768px){ ... }[/css]

Sie können auch einen Bereich mit Haltepunkten festlegen, sodass das CSS nur innerhalb dieser Grenzen gilt.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

Wann man CSS-Breakpoints mit minimaler oder maximaler Breite verwenden sollte

Sie können Ihre Haltepunkte auf unterschiedliche Weise mit min-width , max-width oder sogar durch Kombination beider festlegen. Aber die Frage ist, wann sollten Sie jeden verwenden?

Um es auf einfache Weise zu beantworten: Wenn Sie Ihr Layout mit einem Mobile-First-Ansatz entwerfen, verwenden Sie Haltepunkte mit minimaler Breite und arbeiten Sie sich nach oben.

Legen Sie Ihre Standardstile für das kleine Gerät fest und passen Sie sie einfach für größere Geräte entsprechend an.

Wenn Sie zuerst für größere Geräte entwerfen, legen Sie Ihr Standard-CSS so fest, wie Sie es normalerweise tun würden, und passen Sie es für kleinere Geräte mit dem Ansatz mit maximaler Breite an.

Verwenden von CSS-Breakpoints mit SASS

Wenn Sie einen Präprozessor wie SASS oder SCSS verwenden, können Sie viel intelligentere Breakpoints schreiben. Mit Mixin können Sie mehr deklarative Breakpoints erstellen, an die Sie sich erinnern können, wie folgt:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

Bei der Arbeit in einer Gruppe ist es viel einfacher, sich an „Tablet-Up“ zu erinnern als an 768 Pixel oder 48 Em. Jeder kann diesen Haltepunkt verstehen; Es ist für Tablets und höhere Bildschirmgrößen geeignet.

Welche CSS-Haltepunkte verwendet werden sollen

Wir haben gesehen, wie Haltepunkte verwendet werden und wann sie verwendet werden, aber die Frage bleibt immer noch: Welche spezifischen Haltepunkte sollten Sie verwenden?

Lassen Sie uns die Dinge ein wenig aufschlüsseln. Sie müssen nur auf Desktop-, Tablet- und Mobilgerätegrößen abzielen. Sie können einige beliebte Frameworks überprüfen, um eine Vorstellung davon zu bekommen, welcher Ansatz zu verfolgen ist.

Bootstrap hat Breakpoints bei 576px, 768px, 992px und 1200px. Foundation hat hauptsächlich Breakpoints bei 40em und 64em. Bei Bulma sind Haltepunkte auf 768px, 769px, 1024px, 1216px und 1408px gesetzt.

Jeder hat unterschiedliche Breakpoints, aber eines haben sie gemeinsam: einen Mobile-First-Ansatz. Sie können einen dieser Haltepunkte als Ausgangspunkt verwenden oder wie folgt einen eigenen erstellen:

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

Du hast die Idee!

Einpacken

Zusammenfassend lässt sich sagen, dass CSS-Haltepunkte eine großartige Möglichkeit sind, Ihr Layout neu zu strukturieren, um die beste Benutzererfahrung auf verschiedenen Geräten zu bieten.

Versuchen Sie immer, Haltepunkte basierend auf Ihren eigenen Inhalten zu erstellen, nicht auf Geräten. Unterteilen Sie sie auf eine logische Breite und nicht auf eine zufällige Breite und halten Sie sie auf eine überschaubare Zahl, damit das Ändern einfach und klar bleibt.

Welche CSS-Haltepunkte verwenden Sie für Ihre Layouts? Lassen Sie es uns im Kommentarbereich unten wissen.

Was kommt als nächstes?

Erstellen und testen Sie kostenlos Ihre benutzerdefinierten Gutenberg-Blöcke mit Local!

Erfahren Sie hier mehr über Local!

Weitere Ratschläge zum Erstellen responsiver Websites finden Sie in diesen Artikeln!

• So machen Sie Ihre WordPress-Seite mobilfreundlich
• So erstellen Sie ein responsives Navigationsmenü in WordPress
• 7 Best-Practice-Tipps für responsives Webdesign