📱 Points d'arrêt

Les points d'arrêt sont des largeurs personnalisables qui déterminent le comportement de votre mise en page réactive sur les tailles d'appareil ou de fenêtre d'affichage dans Orochi CSS.

Concepts de base

Les points d'arrêt sont les éléments fondamentaux du responsive design. Utilisez-les pour contrôler l'adaptation de votre mise en page à une fenêtre d'affichage ou à une taille d'appareil spécifique. Utilisez des requêtes média pour structurer votre CSS par point d'arrêt. Les requêtes média sont une fonctionnalité CSS qui permet d'appliquer conditionnellement des styles en fonction d'un ensemble de paramètres de navigateur et de système d'exploitation. Nous les utilisons le plus souvent min-width dans nos requêtes média. L'objectif est de privilégier le mobile et le responsive design. Le CSS d'Orochi vise à appliquer le strict minimum de styles pour qu'une mise en page fonctionne au plus petit point d'arrêt, puis à superposer des styles pour adapter le design aux appareils plus grands. Cela optimise votre CSS, améliore le temps de rendu et offre une expérience utilisateur optimale à vos visiteurs.

Points d'arrêt disponibles

Orochi CSS inclut six points d'arrêt par défaut, parfois appelés « niveaux de grille », pour une construction réactive. Ces points d'arrêt peuvent être personnalisés via les variables CSS.

Point d'arrêt Infixe de classe Dimensions
Très petit Aucun <576px
Petit phone ≥576px
Moyen tablet ≥768px
Grand laptop ≥992px
Très grand desktop ≥1200px
Très très grand tv ≥1400px

Variables CSS des breakpoints :

Chaque point d'arrêt a été choisi pour accueillir confortablement des box dont la largeur est un multiple de 12. Les points d'arrêt sont également représentatifs d'un sous-ensemble de tailles d'appareils et de dimensions de fenêtre d'affichage courantes ; ils ne ciblent pas spécifiquement chaque cas d'utilisation ou appareil. Au contraire, les plages offrent une base solide et cohérente sur laquelle s'appuyer pour presque tous les appareils. Ces points d'arrêt sont personnalisables via les variables CSS : vous les trouverez dans la section :root de votre feuille de style Orochi. 


:root {
  --o-base: 0;
  --o-phone: 576px;
  --o-tablet: 768px;
  --o-laptop: 992px;
  --o-desktop: 1200px;
  --o-tv: 1400px;
}

Requêtes des médias

Orochi CSS étant conçu pour être mobile-first, nous utilisons plusieurs requêtes média pour créer des points d'arrêt pertinents pour nos mises en page et interfaces. Ces points d'arrêt sont principalement basés sur la largeur minimale de la fenêtre d'affichage et nous permettent d'agrandir les éléments à mesure que celle-ci évolue.

Largeur minimale

Orochi CSS utilise principalement les plages de requêtes multimédias suivantes (ou points d'arrêt) pour notre mise en page, notre système de grille et nos composants.

Structure des media queries :


/* Pas de media query nécessaire pour base car c'est effectivement `@media (min-width: 0) { ... }` */

/* Petits appareils (télébases en mode paysage, 576px et plus) */
@media (min-width: 576px) { 
  .o-col-phone-6 { width: 50%; }
}

/* Appareils moyens (tablettes, 768px et plus) */
@media (min-width: 768px) { 
  .o-col-tablet-4 { width: 33.33%; }
}

/* Grands appareils (ordinateurs de bureau, 992px et plus) */
@media (min-width: 992px) { 
  .o-col-laptop-3 { width: 25%; }
}

/* Très grands appareils (grands ordinateurs de bureau, 1200px et plus) */
@media (min-width: 1200px) { 
  .o-col-desktop-2 { width: 16.67%; }
}

/* Très très grands appareils (ordinateurs de bureau plus larges, 1400px et plus) */
@media (min-width: 1400px) { 
  .o-col-tv-1 { width: 8.33%; }
}

Exemple d'utilisation :


/* Exemple : Masquer à partir de `min-width: 0`, puis afficher au point d'arrêt `phone` */
.custom-class {
  display: none;
}

@media (min-width: 576px) {
  .custom-class {
    display: block;
  }
}

Largeur maximale

Nous utilisons parfois des requêtes multimédias qui vont dans l'autre sens (la taille d'écran donnée ou plus petite) :

Structure des media queries :


/* `base` ne retourne qu'un ensemble de règles et aucune requête média */
/* ... { ... } */

/* `phone` s'applique aux très petits appareils (télébases portrait, moins de 576px) */
@media (max-width: 575.98px) { ... }

/* `tablet` s'applique aux petits appareils (télébases paysage, moins de 768px) */
@media (max-width: 767.98px) { ... }

/* `laptop` s'applique aux appareils moyens (tablettes, moins de 992px) */
@media (max-width: 991.98px) { ... }

/* `desktop` s'applique aux grands appareils (ordinateurs de bureau, moins de 1200px) */
@media (max-width: 1199.98px) { ... }

/* `tv` s'applique aux très grands appareils (grands ordinateurs de bureau, moins de 1400px) */
@media (max-width: 1399.98px) { ... }

Exemple d'utilisation :


/* Exemple : Style du point d'arrêt moyen vers le bas */
@media (max-width: 767.98px) {
  .custom-class {
    display: block;
    font-size: 14px;
  }
}

Pourquoi soustraire 0,02px ? Les navigateurs ne prennent actuellement pas en charge les requêtes contextuelles de plage. Nous contournons donc les limitations des préfixes min- et max- et des fenêtres d'affichage avec des largeurs fractionnaires (qui peuvent survenir dans certaines conditions sur les appareils haute résolution, par exemple) en utilisant des valeurs plus précises.

Point d'arrêt unique

Il existe également des requêtes multimédias permettant de cibler un seul segment de tailles d'écran à l'aide des largeurs de point d'arrêt minimales et maximales.


/* Cibler uniquement les très petits écrans */
@media (max-width: 575.98px) { ... }

/* Cibler uniquement les petits écrans */
@media (min-width: 576px) and (max-width: 767.98px) { ... }

/* Cibler uniquement les écrans moyens */
@media (min-width: 768px) and (max-width: 991.98px) { ... }

/* Cibler uniquement les grands écrans */
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

/* Cibler uniquement les très grands écrans */
@media (min-width: 1200px) and (max-width: 1399.98px) { ... }

/* Cibler uniquement les très très grands écrans */
@media (min-width: 1400px) { ... }

Exemple pratique :


/* Styles spécifiques aux tablettes uniquement */
@media (min-width: 768px) and (max-width: 991.98px) {
  .tablet-only {
    padding: 2rem;
    font-size: 18px;
  }
}

Entre les points d'arrêt

De même, les requêtes multimédias peuvent s'étendre sur plusieurs largeurs de points d'arrêt:


/* Appliquer des styles en partant des appareils moyens jusqu'aux très grands appareils */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .between-tablet-desktop {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* De petit à grand */
@media (min-width: 576px) and (max-width: 991.98px) {
  .between-phone-laptop {
    flex-direction: column;
  }
}

Variables CSS personnalisables

Orochi CSS utilise des variables CSS personnalisables pour tous ses points d'arrêt. Vous pouvez les modifier facilement :


:root {
  /* Points d'arrêt par défaut */
  --o-base: 0;
  --o-phone: 576px;
  --o-tablet: 768px;
  --o-laptop: 992px;
  --o-desktop: 1200px;
  --o-tv: 1400px;

  /* Exemple de personnalisation */
  /*
  --o-phone: 600px;
  --o-tablet: 800px;
  --o-laptop: 1024px;
  */
}

Exemples pratiques

Navigation responsive


/* Navigation mobile par défaut */
.o-nav {
  flex-direction: column;
}

.o-list {
  display: none;
}

/* Navigation desktop à partir de tablet */
@media (min-width: 768px) {
  .o-nav {
    flex-direction: row;
    justify-content: space-between;
  }

  .o-list {
    display: flex;
  }
}

Grille de cartes adaptative


.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* 1 colonne sur mobile */
}

@media (min-width: 576px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur phone */
  }
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur tablet */
  }
}

@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur desktop */
  }
}

Typographie responsive


.hero-title {
  font-size: 2rem; /* 32px sur mobile */
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 3rem; /* 48px sur tablette */
  }
}

@media (min-width: 1200px) {
  .hero-title {
    font-size: 4rem; /* 64px sur desktop */
  }
}

💡 Bonnes pratiques

  • Mobile-first : Commencez toujours par les styles mobiles, puis ajoutez les media queries pour les écrans plus larges.
  • v1.0.0 multi-appareils : v1.0.0ez votre design sur différentes tailles d'écran pour vous assurer de la cohérence.
  • Performance : Évitez d'avoir trop de media queries complexes qui peuvent impacter les performances.
  • Lisibilité : Organisez vos media queries de manière logique dans votre CSS pour faciliter la maintenance.