Skip to main content

Responsivité

Le design responsive est une approche de la conception web qui permet d’adapter votre contenu web aux différentes tailles d’écran et de fenêtre d’une variété d’appareils.

Par exemple, le contenu peut être séparé en différentes colonnes sur les grands écrans, car elles sont suffisamment larges pour s’adapter à ce design. Mais si le contenu est séparé en plusieurs colonnes sur un appareil mobile, il sera difficile pour les utilisateurs de le lire et d’interagir avec lui.

responsive

Grâce à un design responsive, les utilisateurs accéderont au même fichier de base par le biais de leur navigateur, quel que soit l’appareil, mais le code CSS contrôlera la mise en page et la rendra différemment en fonction de la taille de l’écran.

Viewport​

En définissant la largeur du viewport avec width=device-width on peut indiquer au navigateur de prendre en compte la largeur réelle de l'appareil plutôt que de définir une largeur fixe, ce qui permet à la mise en page de s'ajuster en conséquence.

En utilisant la balise meta viewport dans l'en-tête HTML on sait indiquer comment le navigateur doit gérer l'échelle initiale de la page. Par exemple, en définissant initial-scale=1.0, il ne doit pas appliquer de zoom initial et peux afficher la page à sa taille réelle.

Pour s'assurer d'un bon rendu on va donc utiliser le viewport avec les valeurs suivantes.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mesure relatives​

On peut Utilisé des unités relatives comme % (pourcentage), em, rem ou vw (viewport width) pour définir les tailles de police, les dimensions des éléments et les marges/paddings.

Ces unités permettent aux éléments de s'adapter dynamiquement à la taille de leur parent ou à la largeur de la fenêtre du navigateur.

em​

L'unité em est basée sur la taille de la police de l'élément parent. Un em équivaut à la taille de la police actuelle de l'élément en question.
Par exemple, si la taille de la police de l'élément parent est de 16px, 1em équivaudra à 16px.

Les em sont souvent utilisés pour définir la taille de la police, les marges, les paddings et d'autres dimensions d'éléments. Ils permettent une mise à l'échelle dynamique en fonction de la taille de la police de l'élément parent.

rem​

Cela garantit une cohérence dans toute la mise en page, car tous les éléments sont basés sur la même taille de police.

Les rem sont particulièrement utiles pour les mises en page complexes où la taille de la police de l'élément parent peut varier.
Ils offrent une manière plus prévisible de définir les tailles et les espacements d'éléments.

vw (viewport width)​

L'unité vw représente une fraction de la largeur de la fenêtre d'affichage (viewport) de l'appareil.
Par exemple, 1vw équivaut à 1% de la largeur de la fenêtre d'affichage.

Les vw sont souvent utilisés pour définir des dimensions qui doivent être proportionnelles à la largeur de l'écran, telles que la largeur des conteneurs ou des images.
Ils permettent de créer des mises en page réactives qui s'ajustent automatiquement à la taille de l'écran de l'utilisateur.

Media queries​

Les Media Queries sont des règles en CSS qui permettent d'appliquer des styles conditionnellement selon la taille de l'écran.
Cela permet de créer des designs qui s'ajustent automatiquement en fonction de la taille de l'écran.

Elles s'écrivent avec @media en CSS, suivie de la condition sur laquelle les styles doivent s'appliquer.

media query

   @media (max-width: 768px) {
    /* Styles à appliquer pour les écrans jusqu'à 768px de largeur */
}

Dans cet exemple, les styles à l'intérieur des accolades seront appliqués uniquement lorsque la largeur de l'écran est de 768 pixels ou moins.

Conditions​

max-width​

Applique les styles lorsque la largeur de l'écran est inférieure ou égale à la valeur spécifiée.

min-width​

Applique les styles lorsque la largeur de l'écran est supérieure ou égale à la valeur spécifiée.

orientation​

Applique les styles en fonction de l'orientation de l'écran (paysage ou portrait).

Combinaison​

Il est possible d'enchainer les conditions d'application d'une media query en utilisant l'opérateur and

@media (max-width: 768px) and (orientation: landscape) {
 /* Styles à appliquer pour les écrans jusqu'à 768px de largeur en mode paysage */
}

Ici les styles s'appliqueront uniquement lorsque la largeur de l'écran est de 768 pixels ou moins et que l'orientation de l'écran est paysage.

Breakpoint​

Les breakpoints (points de rupture) font référence aux moments spécifiques où la largeur de l'écran va atteindre la valeur définie d'une media query A ce moment la contenu de la media query va appliquer les styles définit.

Les breakpoints courants correspondent aux tailles d’écran communes

  • Mobile : 360 x 640
  • Mobile: 375 x 667
  • Mobile : 360 x 720
  • iPhone X : 375 x 812
  • Pixel 2 : 411 x 731
  • Tablette : 768 x 1024
  • Ordinateur portable : 1366 x 768
  • Ordinateur portable ou de bureau haute résolution : 1920 x 1080

Un breakpoint s'utilise toujours au sein d'une media query. Il est le moment de basculement où la média query est appliquer.

exemple de breakpoint avec une Media Query qui cible une largeur maximale de 768 pixels, adaptée aux appareils mobiles :

/* Styles pour les appareils mobiles avec une largeur maximale de 768 pixels */
@media screen and (max-width: 768px) {
  /* Définissez vos styles spécifiques pour cet intervalle de taille d'écran */
  body {
    font-size: 14px;
  }
  .container {
    width: 90%;
    margin: 0 auto;
  }
  /* Ajoutez d'autres styles si nécessaire */
}

Images​

Une technique simple pour rendre une image responsive est de crée une class css pour gérer ses dimensions.

.responsive-img {
    max-width: 100%;
    height: auto;
}

Tester​

Utiliser les outils de développement intégrés dans les navigateurs web modernes tels que Google Chrome, Mozilla Firefox, ou Safari. Ces outils permettent de simuler différentes tailles d'écran et de visualiser un site web dans différentes configurations.
Dans Google Chrome, par exemple, on peut ouvrir les outils de développement (F12 ou clic droit > "Inspecter") et utiliser l'option "Toggle Device Toolbar" pour sélectionner différentes tailles d'écran ou personnaliser les dimensions.

Appareils Physiques​

Tester son site web sur une variété d'appareils physiques tels que des smartphones, tablettes, ordinateurs portables et ordinateurs de bureau.

Services en Ligne​

Utiliser des services en ligne tels que BrowserStack ou LambdaTest pour tester son site web sur une variété de navigateurs et d'appareils virtuels.