Les Media queries permettent d'appliquer des CSS uniquement à un type d'écran spécifique. Par exemple, si vous avez un élément sur votre page que vous souhaiteriez apparaître d’une manière différente sur les téléphones qu'il ne le fait sur un ordinateur de bureau.
Avec Gantry5 c’est facile à faire, et ce guide vous emmènera à travers le processus de définition des points d’arrêt, ainsi que l’ajout de media queries dans votre fichier custom.scss.
Définir des points d’arrêt
Comme Gantry 5 vous donne la possibilité de définir facilement les points d'arrêt entre les types de fenêtres, vous pouvez apporter rapidement une expérience utilisateur optimisée pour une large gamme de types d'appareils.
Les Templates Gantry 5 comprennent quatre points d'arrêt clés qui sont définis par des unités rem. Vous pouvez définir les points d'arrêt dans le panneau d'administration Styles au sein de l'administrateur Gantry 5. Pour accéder à ce panneau, allez à Administration → Composants → Gantry 5 Themes → Votre Theme et sélectionnez l'onglet Styles. Comme cet onglet est spécifique à votre Outline, vous pouvez modifier ces paramètres par-outline.
Si vous n'êtes pas familier avec les unités rem. Il y a un excellent explicatif ci-dessous produit par Russ Weakley de SitePoint. De plus, vous pouvez lire un guide détaillé de W3.
Utilisation des media queries sur votre site
Vous servir de vos propres requêtes médias peut être fait très facilement au sein de votre fichier custom.scss. Vous pouvez en savoir plus sur la création de ce fichier et comment cela fonctionne dans notre guide détaillé.
Ci-dessous un exemple de code que vous pourriez ajouter à votre fichier custom.scss pour vous permettre de brancher rapidement et facilement les points d'arrêt de Gantry 5.
Une ligne importante à noter est @import
"nucleus/mixins/breakpoints"; qui charge le fichier _breakpoints.scss, rendant le point d’arrêt mixin disponible à l’utilisation.
// 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"
Tous les CSS que vous souhaitez appliquer à un point d'arrêt spécifique peut être ajouté à l'intérieur de la media querie appropriée ci-dessus.
Qu'est-ce qui se passe derrière la scène?
Ci-dessous, vous pouvez voir un exemple d'une version non-mixin du style breakpoints que nous avons listé ci-dessus. Cela devrait montrer ce qui se passe dans les coulisses, les mixins étant des raccourcis fondamentalement qui permettent d’éviter les fastidieux et interminables scripts.
Nous recommandons fortement l’utilisation de mixins pour leur simplicité, mais l’exemple suivant fonctionne dans le cas où vous ne souhaitez pas les utiliser. L'exemple ci-dessous n'est pas exhaustif et pourrait casser les fonctionnalités existantes si un thème utilise les requêtes médias que nous avons renvoyées ci-dessous et qui ne sont pas incluses dans cet exemple.
@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) {
