22 - Le responsive

Les requêtes média en CSS permettent aux développeurs web de définir des règles de style qui s'appliquent uniquement lorsque certaines conditions sont remplies, telles que la taille de l'écran ou l'orientation du périphérique. Bien souvent, il s'agira de jouer avec la taille de l'écran.

Comment écrire des media queries ?

Il vous suffit de spécifier le type de media, bien souvent "screen" et la où les règles qui s'y appliquent.

Dans cet exemple, ma div sera en fond bleu tant que la largeur de mon écran sera supérieur à 600px;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      
      div {
        background: blue;
        width: 1024px;
        margin: 0 auto;
      }
      
       

			div{
				a{
					background:red;
				}
			}
      @media screen and (max-width: 1200px) {
        div {
          width: 800px;
        }
      }

      @media screen and (max-width: 900px) {
        div {
          width: 600px;
        }
      }
      @media screen and (max-width: 750px) {
        div {
          width: 100%;
        }
      }

    </style>
  </head>
  <body>
    <div>Ma div</div>
  </body>
</html>

Le mobile first

Il existe plusieurs stratégie pour gérer le comportement responsive. Tantôt il sera possible de réaliser votre site, en format "desktop" pour ensuite ajouter les médias queries qui modifieront le comportement en desktop pour le comportement mobile. Il s'agit des exemples cités ci-dessus.

Mais une autre stratégie est de le réaliser dans l'autre sens. De d'abord faire votre CSS de base en le pensant mobile, en premier (mobile first) et ensuite d'y ajouter les media queries pour modifier le comportement en desktop. Il y a plusieurs avantages à utiliser cette méthode :

Vous obtiendrez un résultat plus rapide et plus clair en mobile. La plupart du temps, le comportement en mobile se fera en "colonne", soit finalement, le comportement par défaut d'un élément de type "block". A savoir, 100% de l'écran et une hauteur automatique. Vous devrez que très peu modifier le comportement d'un élément pour le rendre "responsive" en mobile.
Votre code CSS sera probablement plus léger. Ajouter des propriétés vous coûtera moins de ligne que d'en effacer.
Vous servez votre css principal à la majorité des lecteurs. Vous vous concentrez en premier lieu sur le mobile et donc, sur le type de support le plus utilisé à partir des années 2015.

A l’inverse donc, le code précédent, adapté en mobile first serait adapté de la sorte :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>

      div {
        background: blue;
        width: 100%;
        margin: 0 auto;
      }

      @media screen and (min-width: 900px) {
        div {
          width: 600px;
        }
      }
    </style>
  </head>
  <body>
    <div>Ma div</div>
  </body>
</html>