Créer la feuille de style Responsive

il faut distinguer la taille effective des écrans en pixels et la surface utilisée en CSS

Création de la Media query

1. Définir le viewport
   Dans le head de la page :

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

2. Créer le fichier CSS
   Il avait été créé auparavant, on y fait une déclaration pour une largeur maximale de 768px qui est le point de rupture entre smartphones et tablettes.
   Entre les deux accolades, on écrira tous les styles.

   @media (max-width: 768px) {
   
   }

3. Réinitialiser des élements

       body {
           width: auto !important;
           margin: 0;
           padding: 0;
       }
   	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
       img,
       table,
       td,
       blockquote,
       code,
       pre,
       textarea,
       input,
       iframe,
       object,
       embed,
       video {
           max-width: 100%;
       }
       
       /* conserver le ratio des images */
   
       img {
           height: auto;
       }

4. Ajuster la bannière, son texte et le call to action
   On substitue à l'ancienne image de fond une plus adaptée. Il faut ajouter le mot-clef !important pour forcer la règle

          #banner {
   		width: 100%;
   		height: 188px;
   		margin-bottom: 1em;
   		background-image: url(../images-site/bandeau-banniere-smartphone.jpg) !important; 
                 background-repeat: no-repeat !important; background-size: cover;
   	}

   Figure: Le changement de fond de la banniere

   
   
   

   #banner h1 {
   		padding-top: 3em;
   		font-size: 1.4em;
   	}
   	#banner h2 {
   		width: 65%;
   		margin: 0 auto;
   		line-height: 1;
   		font-size: 1.2em;
   	}

   Figure: Le titre et le call to action

   
   
   

5. Adapter le main

   main {
   	width: 100%;
   	}

   Figure: le bandeau de bracelet est automatiquement ajusté à 100% sur la largeur

   
   
   

6. Modules découvertes
   On change la direction en passant en vertical la distribution du flex et chaque module a une largeur de 100%.

   section#contenu {
   	flex-direction: column;
   	}
   	article.module1, article.module2, .module3 {
   		width: 100% !important;
   	}