Bootstrap 4 Responsive Breakpoints

Media Queries: Medienabfrage

Mit Medienabfragen (Media Queries) können Sie die Darstellung eines Dokuments für verschiedene Ausgabemedien festlegen. Dabei wird nicht ermittelt, um welchen Browser es sich handelt, sondern welcher Medientyp (z.B. Bildschirm oder Drucker), oder Medienmerkmal (z.B. Farbfähigkeit) oder einer Kombination aus beidem der Browser vorfindet.

Media Queries sind elementarer Bestandteil des responsivev Webdesign. Mit der Festlegung von Media Queries wird eine Website u.a. für verschiedene Bildschirmgrößen und Display-Typen optimiert.

Breakpoints: Haltepunkte

Mit Breakpoints werden Punkte oder auch Bereiche definiert an denen das Layout einer Website umbricht

Da Bootstrap zuerst für den mobilen Einsatz entwickelt wurde, erstellen wir mithilfe einiger Medienabfragen sinnvolle Breakpoints für unsere Layouts und Schnittstellen. Diese Breakpoints basieren meistens auf minimalen Ansichtsfensterbreiten und ermöglichen es uns, Elemente zu vergrößern, wenn sich das Ansichtsfenster ändert.

Bootstrap verwendet in unseren Sass-Quelldateien hauptsächlich die folgenden Medienabfragebereiche - oder Haltepunkte - für das Layout, das Rastersystem und die Komponenten.

Extra kleine Geräte (Telefone Porträtansicht, weniger als 576px)
// Keine Medienabfrage für `xs`, da dies die Standardeinstellung in Bootstrap ist

// Kleine Geräte (Telefone im Querformat, 576px und höher)
@media (min-width: 576px) { ... }

// Mittlere Geräte (Tablets ab 768px)
@media (min-width: 768px) { ... }

// Große Geräte (Desktops, 992px und höher)
@media (min-width: 992px) { ... }

// Extra große Geräte (große Desktops ab 1200px)
@media (min-width: 1200px) { ... }

Medienanfragen nach der angegebenen Bildschirmgröße oder kleiner:

// Extra kleine Geräte (Telefone Portraitansicht, weniger als 576px)
@media (max-width: 575.98px) { ... }

// Kleine Geräte (Telefone Querformat, weniger als 768px)
@media (max-width: 767.98px) { ... }

// Mittlere Geräte (Tablets, weniger als 992px)
@media (max-width: 991.98px) { ... }

// Große Geräte (Desktops, weniger als 1200px)
@media (max-width: 1199.98px) { ... }

Extra große Geräte (große Desktops)
// Keine Medienabfrage, da der extra große Breakpoint keine Obergrenze für die Breite hat

Es gibt auch Medienabfragen und Mixins, um ein einzelnes Segment mit Bildschirmgrößen unter Verwendung der minimalen und maximalen Breakpointbreite zu erreichen.

// Extra kleine Geräte (Telefone Portraitansicht, weniger als 576px)
@media (max-width: 575.98px) { ... }

// Kleine Geräte (Telefone im Querformat, 576px und höher)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Mittlere Geräte (Tablets ab 768px)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Große Geräte (Desktops, 992px und höher)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra große Geräte (große Desktops ab 1200px)
@media (min-width: 1200px) { ... }

In ähnlicher Weise können Medienabfragen mehrere Breakpointbreiten umfassen:

Beispiel:
// Example
//Bereich  mittlere Geräte bis zu übergroßen Geräten
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Möchte man zum Beispiel das ein Div mit der Klasse ".zuklein" nicht in der Handy-Portraitansicht gezeigt wird, geht man wie folgt vor:

Beispiel:
// Extra kleine Geräte (Telefone Portraitansicht, weniger als 576px)
@media (max-width: 575.98px) {
    div.zuklein {
        display: none;
    } 
}