Responsive design — CSS course

Pourquoi le responsive ?

Plus de 60% du trafic web vient des mobiles. Un site qui n'est pas responsive perd la majorité de ses visiteurs : et Google le pénalise dans ses résultats de recherche.

Le responsive design, c'est faire en sorte qu'un site s'adapte à toutes les tailles d'écran : téléphone, tablette, laptop, grand écran.

La balise viewport

Sans cette balise dans le <head>, rien ne fonctionne :

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

Elle dit au navigateur mobile : « utilise la vraie largeur de l'écran, ne zoome pas en arrière ». Sans elle, le site s'affiche en version desktop miniaturisée.

Oubli fréquent : L'IA génère parfois du CSS responsive sans ajouter la balise viewport. Tout semble fonctionner en dev tools... mais pas sur un vrai téléphone.

Unités relatives

Évitez les px pour les tailles : préférez les unités relatives :

% : pourcentage du parent (width: 50%)
em : relatif à la taille de police de l'élément (1.5em = 1.5 × taille actuelle)
rem : relatif à la taille de police du <html> (plus prévisible que em)
vw / vh : pourcentage de la largeur / hauteur du viewport

Bonne pratique : utilisez rem pour le texte et % ou fr pour les layouts.

Media queries

Les media queries appliquent du CSS selon la taille de l'écran :

@media (max-width: 768px) {
    .sidebar { display: none; }
    .content { width: 100%; }
}

Breakpoints courants : 480px (mobile), 768px (tablette), 1024px (laptop).

Mobile-first : le même contenu passe de 1 à 3 colonnes à mesure que l'écran s'élargit.

Mobile-first : codez d'abord pour le mobile, puis ajoutez des media queries pour les grands écrans avec min-width. C'est la méthode recommandée.

clamp() : la typographie fluide

clamp(min, préféré, max) définit une valeur qui s'adapte entre un minimum et un maximum :

font-size: clamp(1rem, 2.5vw, 2rem);

Le texte fait au minimum 1rem, au maximum 2rem, et s'adapte entre les deux selon la largeur du viewport. Plus besoin de media queries pour la typographie !

Why responsive?

Over 60% of web traffic comes from mobile devices. A site that isn't responsive loses most of its visitors — and Google penalizes it in search results.

Responsive design means making a site adapt to all screen sizes: phone, tablet, laptop, large display.

The viewport meta tag

Without this tag in the <head>, nothing works:

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

It tells the mobile browser: "use the real screen width, don't zoom out". Without it, the site displays as a miniaturized desktop version.

Common oversight: AI sometimes generates responsive CSS without adding the viewport tag. Everything looks fine in dev tools... but not on a real phone.

Relative units

Avoid px for sizes — prefer relative units:

% — percentage of parent (width: 50%)
em — relative to element's font size (1.5em = 1.5 × current size)
rem — relative to <html> font size (more predictable than em)
vw / vh — percentage of viewport width / height

Best practice: use rem for text and % or fr for layouts.

Media queries

Media queries apply CSS based on screen size:

@media (max-width: 768px) {
    .sidebar { display: none; }
    .content { width: 100%; }
}

Common breakpoints: 480px (mobile), 768px (tablet), 1024px (laptop).

Mobile-first: the same content goes from 1 to 3 columns as the screen widens.

Mobile-first: code for mobile first, then add media queries for larger screens with min-width. This is the recommended approach.

clamp(): fluid typography

clamp(min, preferred, max) defines a value that adapts between a minimum and maximum:

font-size: clamp(1rem, 2.5vw, 2rem);

The text is at minimum 1rem, maximum 2rem, and adapts between the two based on viewport width. No more media queries needed for typography!

Essayez vous-même

h1 {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin-bottom: 16px;
  }

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .card {
    background: #f0f7ff;
    border: 1px solid #bdd5ea;
    border-radius: 8px;
    padding: 16px;
  }
  .card h3 { font-size: 1rem; }
  .card p { font-size: 0.875rem; color: #555; }

/* Tablette : 2 colonnes */
  @media (max-width: 768px) {
    .cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }

/* Mobile : 1 colonne */
  @media (max-width: 480px) {
    .cards {
      grid-template-columns: 1fr;
    }
  }
</style>

<h1>Mes projets (redimensionnez la fenêtre !)</h1>
<div class="cards">
    <div class="card">
        <h3>Projet 1</h3>
        <p>Site vitrine pour une boulangerie.</p>
    </div>
    <div class="card">
        <h3>Projet 2</h3>
        <p>Application de gestion.</p>
    </div>
    <div class="card">
        <h3>Projet 3</h3>
        <p>Boutique en ligne.</p>
    </div>
</div>

Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Transforme ce layout desktop en responsive mobile-first avec media queries : header full-width, sidebar qui passe sous le contenu sur mobile, et un grid de 3 colonnes qui passe en 1 colonne.

Ré-explique sans regarder

Sans relire la réponse de l'IA : avec tes mots, qu'est-ce que l'approche mobile-first, et pourquoi utilise-t-on min-width plutôt que max-width dans ce cas ?

Une bonne explication dit : mobile-first, c'est écrire les styles de base pour le petit écran (1 colonne), puis enrichir vers le grand écran. On part donc du plus simple. Avec min-width, chaque media query ajoute du style quand l'écran s'élargit (@media (min-width: 768px) = à partir de la tablette), ce qui empile les améliorations dans le bon sens. max-width fait l'inverse (desktop-first) et oblige à tout détricoter pour le mobile.

Exercice : Corrigez le code de l'IA

L'IA a oublié la balise viewport ET a utilisé des largeurs en px partout au lieu d'unités relatives. Ajoutez le viewport meta et convertissez les px en unités relatives (%, rem, ou clamp).

Corrigez le code

Accepter ou rejeter le code de l'IA

Tu as demandé une carte responsive. L'IA renvoie ce CSS. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.

.card {
  width: 400px;
  padding: 24px;
  font-size: 18px;
}
@media (max-width: 768px) {
  .card { width: 400px; }
}

À rejeter. Ce n'est pas responsive : la carte est figée à width: 400px, et la media query redéclare exactement la même largeur, donc elle ne sert à rien. Sur un écran de 360px, la carte déborde et provoque un défilement horizontal. Les correctifs : remplacer la largeur fixe par max-width: 400px; width: 100%; (la carte rétrécit avec son parent), passer le font-size en rem ou clamp(), et supprimer la media query inutile.

Rappel libre

Sans remonter dans la leçon : à quoi sert la balise <meta name="viewport">, et pourquoi préférer rem ou % aux px pour un site responsive ?

La balise <meta name="viewport" content="width=device-width, initial-scale=1.0"> dit au mobile d'utiliser la vraie largeur de l'écran au lieu d'afficher une version desktop miniaturisée : sans elle, les media queries ne se déclenchent pas comme prévu. On préfère rem et % aux px parce que ces unités sont relatives (au <html> ou au parent) : les tailles s'adaptent à l'écran et au réglage de police de l'utilisateur, alors qu'un px reste figé.

Pourquoi la balise viewport est-elle indispensable ?

Pour accélérer le chargement Pour que le mobile utilise la vraie largeur d'écran Pour activer les media queries

Quelle unité est relative à la taille de police du <html> ?

em vw rem

Qu'est-ce que l'approche « mobile-first » ?

Créer une app mobile avant le site Coder d'abord pour mobile, puis ajouter des styles pour les grands écrans Cacher le site desktop sur mobile

Que fait clamp(1rem, 3vw, 2.5rem) ?

Fixe la taille à 3vw La taille varie entre 1rem et 2.5rem, idéalement 3vw Fixe la taille à 1rem

Next step

Your site now adapts to every screen. For the finishing touch, we are going to bring it to life. In the last lesson we discover CSS transitions and animations: making a button react on hover, fading a menu in smoothly and giving motion to the interface.

Lesson 8: Animations and transitions →