Le Media Query consentono di applicare il CSS solo a un tipo di schermo specifico. Ad esempio, se si dispone di un elemento della pagina che si desidera visualizzare in modo diverso sui telefoni rispetto a un desktop.
Gantry 5 rende facile da fare, e questa guida vi porterà attraverso il processo di definizione dei breakpoint, così come l'aggiunta di Media Query al vostro file personalizzato custom.scss
Definizione dei breakpoint
Poiché Gantry 5 consente di definire facilmente i breakpoint tra i tipi di viewport, è possibile creare con facilità un'esperienza utente ottimizzata per una vasta gamma di tipi di dispositivi.
I template Gantry 5 includono quattro chiavi breakpoint definiti da unità rem. È possibile impostare i punti di interruzione nel pannello amministrativo Stili all' interno dell' Gantry Admin. Per accedere a questo pannello, spostarsi su Administrator → Components → Gantry 5 Themes → Theme
e selezionare la scheda Styles. Poiché questa scheda è specifica per Outline, è possibile modificare queste impostazioni su base ad ogni Outline.
Se non si ha familiarità con le unità rem, c'è un ottima spiegazione qui scritta da Russ Weakley di SitePoint. Inoltre, è possibile leggere una guida dettagliata da W3.
Uso delle Media Query sul sito Web
L' utilizzo di query multimediali personalizzate può essere fatto molto facilmente all' interno del file custom.scss
. Potete saperne di più sulla creazione di questo file e su come funziona in questa guida dettagliata.
Di seguito è riportato un esempio del codice che si aggiungerebbe al file custom.scss per consentire l' aggancio rapido e semplice ai breakpoint di Gantry 5.
Una riga importante da notare è @import "nucleus/mixins/breakpoint"
, che carica il file _breakpoints.scss
, rendendo il punto di breakpoint del mixin disponibile per l' uso.
{code lang:css showtitle:false}// 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";{/code}
Qualsiasi CSS che si desidera applicare a uno specifico punto di interruzione può essere aggiunto all' interno della Media Query appropriata di cui sopra.
Cosa c' è dietro le quinte?
Di seguito, potete vedere un esempio di una versione non-mixin dello stile breakpoint che abbiamo elencato sopra. Questo dovrebbe dimostrare ciò che accade dietro le quinte, in quanto i mixins sono fondamentalmente delle scorciatoie che aiutano a evitare il noioso scripting, più estenuante.
NOTA: Si raccomanda vivamente di utilizzare i mixin per la loro semplicità, tuttavia l'esempio che segue funzionerà nel caso in cui non si desideri utilizzarli. L' esempio riportato di seguito non è esaustivo e potrebbe influire sulle le funzionalità esistenti se un template utilizza le Media Query che abbiamo affrontato di seguito e che non sono incluse in questo esempio.
{code lang:css showtitle:false}@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) {
}{/code}