Media-queries et breakpoints
Un design propre, progressif et contrôlé sur toutes les dimensions d'écran.Adaptation progressive
Les points d'arrêt sont des variables indispensables pour la conception réactive de vos applications. Utilisez-les pour structurer vos propriétés CSS, afin de contrôler quand votre mise en page peut être adaptée à une taille de fenêtre ou d'appareil particulière.
Les "breakpoints" disponibles
| Breakpoint | Prefix de classe | Dimensions |
|---|---|---|
| Petit Mobile | Aucun | <400px |
| Mobile | m: |
≥400px & <600px |
| Tablette portrait | t: |
≥600px & <900px |
| Moyen (Tablette paysage) | md: |
≥900px & <1200px |
| Desktop | d: |
≥1200px & <1440px |
| Desktop moyen | dm: |
≥1440px & <1600px |
| Desktop large | lg: |
≥1600px & <1800px |
| Desktop extra large | xl: |
≥1800px & <2560px |
| Desktop extra extra large | xxl: |
≥2560px |
Certaine classes de Sass Swing comme les grilles utilisent les media-queries. Pour les utiliser dans le code source HTML, il suffit de faire précéder le nom de la classe avec le préfixe adéquat.
Outils SASS
La version SASS de Sass Swing fournit un mixins @mixins mq(displayType, mode="mf"), qui vous permettra de contrôler la mise en place de vos classes CSS pour les différents points d'arrêts facilement.
Il vous suffit d'importer le fichier ./abstracts/_mixins.scss dans votre fichier. Puis d'utiliser @mixins mq.
Le premier paramètre, défini pour quelle surface d'affichage appliquer les règles.
Les valeurs de ce paramètre sont :
mobile, tablet, tablet-medium, desktop, desktop-medium, desktop-lg, desktop-xlg et desktop-xxlg.
Le deuxième paramètre, défini le mode. mf correspond à mobile-first (valeur par défaut) tout autre valeur correspondra à desktop-first.
Sass Swing fournit d'autres mixins pour contrôler les points d'arrêts :
@mixins mq-up(MinWidthInPixel)@mixins mq-down(MaxWidthInPixel)@mixins mq-between(MinWidthInPixel, MaxWidthInPixel)
Exemple :
@use "./vendors/sass-swing/abstracts/mixins" as *;
@include mq(desktop-medium) {
body > main {
margin-right: 3vw;
margin-left: 2vw;
}
}
@include mq(desktop-lg) {
body > main {
margin-right: 8vw;
margin-left: 6vw;
}
}
@include mq(desktop-xlg) {
body > main {
margin-right: 13vw;
margin-left: 11vw;
}
}