Verwenden von Medienabfragen (Media Queries)

Medienabfragen ermöglichen es, CSS nur auf einen bestimmten Bildschirmtyp anzuwenden. Wenn Sie beispielsweise ein Element auf Ihrer Seite haben, das auf Handys anders dargestellt werden soll, als auf einem Desktop.

Gantry 5 ist einfach zu bedienen, und diese Anleitung führt Sie durch den Prozess der Definition von Haltepunkten sowie das Hinzufügen von Medienabfragen zu Ihrer custom.scss-Datei.

Breakpoints definieren

Da Gantry 5 Ihnen die Möglichkeit bietet, die Breakpoints zwischen den Ansichtsfenstertypen einfach zu definieren, können Sie mit Leichtigkeit eine Benutzerfreundlichkeit schaffen, die für eine Vielzahl von Gerätetypen optimiert ist.

Gantry 5 Templates beinhalten vier wichtige Breakpoints, die durch Rem-Einheiten definiert werden. Sie können die Breakpoints im Administrationsbereich von Styles innerhalb des Gantry 5-Administrators festlegen. Um auf dieses Fenster zuzugreifen, gehen Sie zu Administrator → Components → Gantry 5 Themes → Your Theme und wählen Sie die Registerkarte Styles. Da diese Registerkarte skizzenspezifisch ist, können Sie diese Einstellungen pro Skizze ändern.

Wenn du nicht mit den Rem-Einheiten vertraut bist. Es gibt unten eine ausgezeichnete Erklärung, die von Russ Weakley für SitePoint erstellt wurde. Zusätzlich kannst du eine detaillierte Anleitung von W3 lesen.

Verwenden von Media Queries auf Ihrer Website

Die Verwendung eigener Medienabfragen kann sehr einfach in der custom.scss-Datei durchgeführt werden. Weitere Informationen zur Erstellung dieser Datei und ihrer Funktionsweise finden Sie in unserer ausführlichen Anleitung.

Nachfolgend finden Sie ein Beispiel für den Code, den Sie zu Ihrer custom.scss-Datei hinzufügen würden, damit Sie schnell und einfach zu den Breakpoints von Gantry 5 gelangen können.

Eine wichtige zu beachtende Zeile ist @import "nucleus/mixins/breakpoints", der die Datei _breakpoints.scss lädt und den mixin breakpoint zur Verfügung stellt.

// Gantry 5 custom CSS file

// import breakpoints
@import "dependencies";

// Typical values are the default breakpoints set in Gantry 5
// but these values are user definable in style settings
// so that is why the code below uses mixins to get the actual
// values from Gantry 5 template.

// commonly used media queries

//  typically min 75rem
@include breakpoint(large-desktop-range) {

}
// typically range 60rem to 74.938rem
@include breakpoint(desktop-range) {

}

// typically 48rem to 59.938rem
@include breakpoint(tablet-range) {

}
// typically 30rem to 47.938rem
@include breakpoint(large-mobile-range) {

}
// typically max 30rem
@include breakpoint(small-mobile-range) {

}

// Less commonly used media queries

// typically min 60rem
@include breakpoint(desktop-only) {

}
// typically min 48rem
@include breakpoint(no-mobile) {

}
// typically max 47.938 rem
@include breakpoint(mobile-only) {

}
// typically max 59.938rem
@include breakpoint(no-desktop) {

}

// Mobile Menu Breakpoint
@media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { ... your css in here ... }

@import "nucleus/mixins/breakpoints";

Jedes CSS, das Sie auf einen bestimmten Breakpoint anwenden möchten, kann innerhalb der entsprechenden Medienabfrage oben hinzugefügt werden.

Was passiert hinter den Kulissen?

Unten sehen Sie ein Beispiel für eine Nicht-Mixin-Version des Breakpoints-Stylings, das wir oben aufgeführt haben. Dies sollte zeigen, was hinter den Kulissen vor sich geht, da Mixins im Grunde genommen Abkürzungen sind, die Ihnen helfen, das mühsame, langwierige Skripting zu vermeiden.

Wir empfehlen die Verwendung von Mixins wegen ihrer Einfachheit sehr, aber das folgende Beispiel wird funktionieren, falls Sie sie nicht verwenden möchten. Das folgende Beispiel ist nicht allumfassend und könnte bestehende Funktionen unterbrechen, wenn ein Thema Medienabfragen verwendet, die wir unten angesprochen haben und die in diesem Beispiel nicht enthalten sind.

@import "dependencies";
// For small phones
@media all and (max-width: $breakpoints-large-mobile-container) {
}
// For big phones
@media all and (max-width: $breakpoints-tablet-container) and (min-width: $breakpoints-large-mobile-container) {
}
// For tablets
@media all and (max-width: $breakpoints-desktop-container) and (min-width: $breakpoints-tablet-container) {
}
// For medium size computer screens
@media all and (max-width: $breakpoints-large-desktop-container) and (min-width: $breakpoints-desktop-container) {
}
// For large computer screens
@media all and (min-width: $breakpoints-large-desktop-container) {
}