Facile

Le Responsive Design

Le responsive design (ou "conception adaptative") est une approche de développement web qui vise à faire en sorte qu'une interface s'adapte automatiquement à la taille de l'écran sur lequel elle est affichée. Avant de plonger dans React Native, il est essentiel de comprendre cette technique fondamentale du web, ses forces et ses limites.

Qu'est-ce que le responsive design ?

L'objectif du responsive design est simple : un seul code HTML/CSS, un rendu optimal sur tous les appareils — que ce soit un smartphone, une tablette, un laptop ou un grand écran.

Un peu d'histoire

Le terme responsive web design a été popularisé par Ethan Marcotte en 2010 dans un article fondateur publié sur A List Apart. Depuis, cette approche est devenue un standard incontournable du développement web.

Pourquoi c'est indispensable aujourd'hui ?

Plus de 60 % du trafic web mondial provient des mobiles
Google applique le Mobile First Indexing : il indexe la version mobile d'un site en priorité
Une interface non responsive génère une mauvaise expérience utilisateur (zoom, défilement horizontal, éléments coupés...)

Ces chiffres expliquent pourquoi tout site web moderne doit être conçu pour fonctionner sur toutes les tailles d'écran. Mais comme nous le verrons en fin de chapitre, le responsive a aussi ses limites — et c'est précisément là qu'interviennent les technologies que nous étudierons dans ce cours.

Les trois piliers du responsive design

Le responsive repose sur trois mécanismes CSS fondamentaux.

1. Une grille fluide (Fluid Grid)

On utilise des unités relatives (%, fr, vw) plutôt que des pixels fixes pour que les éléments s'étirent et se rétrécissent naturellement avec la fenêtre.

css

/* Fixe : ne s'adapte pas */
.container {
  width: 960px;
}

/* Fluide : s'adapte à la fenêtre */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

Avec une grille fluide, les éléments occupent un pourcentage de leur conteneur plutôt qu'une largeur fixe en pixels. Cela signifie qu'un conteneur de width: 90% occupera 90 % de la largeur disponible, que celle-ci soit de 320 px (smartphone) ou 1920 px (écran large).

2. Des images flexibles (Flexible Images)

Les images doivent elles aussi s'adapter à leur conteneur. Sans cela, une image de 1200 px de large déborderait sur un écran de 375 px.

css

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

La propriété max-width: 100% empêche l'image de dépasser la largeur de son conteneur, tandis que height: auto conserve le ratio d'aspect original.

3. Les Media Queries

C'est le coeur du responsive : des règles CSS conditionnelles qui s'appliquent uniquement si certaines conditions sur l'écran sont remplies (largeur, orientation, résolution...).

css

/* Ces styles s'appliquent uniquement sur écrans de 768px ou moins */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Les media queries permettent de modifier radicalement la mise en page en fonction du contexte : masquer une barre latérale sur mobile, empiler des colonnes verticalement, adapter la taille du texte, etc.

Quels sont les trois piliers du responsive design ?

La balise viewport

Avant tout responsive, il faut déclarer cette balise dans le <head> du HTML. Sans elle, les navigateurs mobiles vont simuler un écran large (typiquement 980 px) et réduire la page pour l'afficher en entier — ce qui rend les media queries inutiles.

html

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

Attribut	Valeur	Effet
`width`	`device-width`	La largeur de la page correspond à la largeur réelle de l'écran
`initial-scale`	`1.0`	Pas de zoom au chargement de la page

Ne l'oubliez jamais !

Sans la balise viewport, un site responsive se comportera comme un site desktop classique sur mobile. C'est la première chose à vérifier lorsqu'un design responsive ne fonctionne pas sur un téléphone.

Les breakpoints

Un breakpoint est un seuil de largeur d'écran à partir duquel la mise en page change. C'est grâce aux breakpoints que l'on définit les paliers de transition entre les différentes versions de l'interface.

Les breakpoints standards

Nom	Largeur	Appareils ciblés
`xs` (extra small)	< 576px	Petits smartphones
`sm` (small)	≥ 576px	Smartphones classiques
`md` (medium)	≥ 768px	Tablettes
`lg` (large)	≥ 992px	Laptops / petits desktops
`xl` (extra large)	≥ 1200px	Grands écrans
`xxl`	≥ 1400px	Très grands écrans / TV

Bootstrap vs Tailwind

Les valeurs ci-dessus sont celles utilisées par Bootstrap. Tailwind CSS utilise des valeurs légèrement différentes : sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px. L'important n'est pas de mémoriser ces chiffres exacts, mais de comprendre le principe des breakpoints.

Exemple concret avec media queries

css

/* Mobile (défaut, pas de media query nécessaire) */
.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* Tablette */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .card {
    padding: 2rem;
    max-width: 960px;
  }
}

Dans cet exemple, la carte s'affiche en colonne sur mobile, passe en ligne sur tablette, puis gagne davantage d'espacement et une largeur maximale sur desktop. La mise en page évolue progressivement en fonction de l'espace disponible.

Mobile First vs Desktop First

Il existe deux approches pour écrire du CSS responsive. Le choix de l'approche influence la structure des media queries.

Desktop First

On part des grands écrans et on surcharge avec des media queries max-width pour les petits écrans.

css

/* Style de base : desktop */
.menu {
  display: flex;
  flex-direction: row;
}

/* On adapte pour mobile */
@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

Mobile First (approche recommandée)

On part des petits écrans, et on enrichit progressivement avec des media queries min-width pour les grands écrans.

css

/* Style de base : mobile */
.menu {
  display: flex;
  flex-direction: column;
}

/* On enrichit pour tablette et au-delà */
@media (min-width: 768px) {
  .menu {
    flex-direction: row;
  }
}

Pourquoi adopter le Mobile First ?

L'approche Mobile First présente plusieurs avantages :

Performance : les mobiles ne téléchargent que le CSS dont ils ont besoin (les media queries min-width ne se déclenchent pas sur petit écran)
Priorisation du contenu : elle force à se concentrer sur l'essentiel dès le départ
Cohérence : c'est l'approche adoptée par Tailwind CSS et la plupart des frameworks modernes
SEO : elle est alignée avec le Mobile First Indexing de Google

Quelle approche est recommandée pour écrire du CSS responsive ?

Les unités CSS utiles en responsive

Le choix des unités CSS est crucial pour créer des mises en page véritablement fluides. Voici les principales unités à connaître.

Unité	Signification	Exemple d'usage
`%`	Pourcentage du parent	Largeurs de colonnes
`vw`	% de la largeur du viewport	Typographie fluide, hero sections
`vh`	% de la hauteur du viewport	Sections plein écran
`rem`	Relatif à la taille de police root	Espacements, typographie
`em`	Relatif à la taille de police du parent	Composants auto-scalables
`fr`	Fraction dans CSS Grid	Grilles fluides
`clamp()`	Valeur entre un min et un max	Typographie responsive sans media query

La fonction `clamp()` : le responsive sans media query

La fonction clamp() est particulièrement élégante : elle permet de définir une valeur qui varie fluidement entre un minimum et un maximum, sans avoir besoin d'écrire de media queries.

css

/* Typographie fluide avec clamp() */
h1 {
  /* min: 1.5rem, idéal: 4vw, max: 3rem */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Dans cet exemple, la taille du titre ne descendra jamais en dessous de 1.5rem et ne dépassera jamais 3rem, mais entre ces deux bornes, elle s'adaptera fluidement à la largeur du viewport grâce à l'unité 4vw.

Flexbox et Grid : les outils du responsive moderne

CSS propose deux systèmes de mise en page puissants qui facilitent considérablement la création de layouts responsives.

Flexbox — pour les layouts en une dimension

Flexbox excelle pour organiser des éléments sur une seule ligne ou colonne, avec la possibilité de passer à la ligne automatiquement.

css

.container {
  display: flex;
  flex-wrap: wrap; /* Les éléments passent à la ligne si besoin */
  gap: 1rem;
}

.item {
  flex: 1 1 300px; /* Grandit, rétrécit, base de 300px */
}

Avec flex: 1 1 300px, chaque élément fait au minimum 300 px de large, mais peut grandir pour occuper l'espace disponible. Si la ligne n'est plus assez large pour accueillir un élément, il passe automatiquement à la ligne suivante grâce à flex-wrap: wrap.

CSS Grid — pour les layouts en deux dimensions

CSS Grid permet de créer des grilles complexes avec un contrôle sur les lignes et les colonnes simultanément.

css

.grid {
  display: grid;
  /* Colonnes qui s'adaptent automatiquement : min 250px, max 1fr */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

La combinaison auto-fit + minmax() est particulièrement puissante : elle crée automatiquement le nombre de colonnes nécessaire en fonction de l'espace disponible, sans aucune media query.

Responsive sans media query

Flexbox avec flex-wrap et Grid avec auto-fit / minmax() permettent de créer des mises en page responsives sans écrire de media queries. Ces techniques sont dites "intrinsèquement responsives" car elles s'adaptent naturellement à l'espace disponible.

Responsive avec Tailwind CSS

Tailwind CSS adopte une approche Mobile First : les classes sans préfixe s'appliquent à tous les écrans (y compris mobile), et on ajoute des préfixes de breakpoint pour cibler les écrans plus grands.

Les préfixes de breakpoints Tailwind

Préfixe	Breakpoint	Signification
(aucun)	0px+	Tous les écrans (style de base mobile)
`sm:`	≥ 640px	Smartphones larges
`md:`	≥ 768px	Tablettes
`lg:`	≥ 1024px	Laptops
`xl:`	≥ 1280px	Grands écrans
`2xl:`	≥ 1536px	Très grands écrans

Exemples pratiques

html

<!-- Colonne sur mobile, ligne sur tablette et au-delà -->
<div class="flex flex-col md:flex-row gap-4">
  <div>Colonne 1</div>
  <div>Colonne 2</div>
</div>

<!-- Grille : 1 col mobile, 2 col tablette, 3 col desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Texte plus grand sur desktop -->
<h1 class="text-2xl lg:text-4xl font-bold">Titre</h1>

<!-- Élément caché sur mobile, visible sur desktop -->
<aside class="hidden lg:block">Sidebar</aside>

Avec Tailwind, la logique Mobile First est naturelle : on écrit les classes de base (qui s'appliquent sur mobile), puis on ajoute des préfixes pour les modifier sur les écrans plus grands. Il n'y a jamais besoin d'écrire des media queries manuellement.

En Tailwind CSS, que signifie la classe `md:flex-row` ?

Ce que le responsive ne remplace pas

Le responsive design est un outil puissant pour adapter une interface web à différentes tailles d'écran. Mais il reste fondamentalement une technologie web exécutée dans un navigateur. Il ne permet pas de :

Accéder au matériel natif du téléphone (caméra avancée, Bluetooth, NFC, capteurs biométriques...)
Envoyer des notifications push natives (celles du système, pas les notifications web limitées)
S'installer sur l'écran d'accueil comme une véritable application native (avec icône, splash screen, intégration système)
Être distribué via l'App Store ou le Play Store pour toucher les utilisateurs là où ils cherchent des applications
Fonctionner de manière robuste en mode hors-ligne (le service worker des PWA offre une solution partielle, mais limitée)

Responsive ≠ Application mobile

Un site responsive s'adapte visuellement aux petits écrans, mais il reste un site web. Il ne peut pas interagir avec le système d'exploitation comme le fait une application native. L'expérience utilisateur reste celle d'un navigateur, pas celle d'une application dédiée.

C'est précisément pour dépasser ces limites qu'existent des solutions comme Ionic/Capacitor, React Native ou Flutter. Ces technologies ne sont pas des concurrents du responsive — elles répondent à des besoins différents :

Besoin	Responsive Web	Application Native / Cross-platform
Adapter la mise en page à l'écran	Oui	Oui
Notifications push système	Limité	Oui
Accès caméra, GPS, Bluetooth	Partiel	Complet
Distribution sur les stores	Non	Oui
Mode hors-ligne robuste	Limité (PWA)	Oui
Performance native	Non	Oui

Dans ce cours, nous allons apprendre React Native — un framework cross-platform qui permet de créer de véritables applications mobiles avec JavaScript et React. Le responsive design reste un prérequis indispensable (les principes de mise en page adaptative s'appliquent aussi en mobile), mais React Native va nous permettre de franchir les limites du navigateur.

À retenir

Points clés du responsive design

Les fondamentaux :

Le responsive repose sur trois piliers : grille fluide, images flexibles et media queries
La balise viewport est indispensable pour que le responsive fonctionne sur mobile
Les breakpoints définissent les seuils de largeur qui déclenchent un changement de mise en page

Les bonnes pratiques :

Adopter l'approche Mobile First (styles de base pour mobile, enrichis avec min-width)
Utiliser Flexbox et CSS Grid pour des layouts intrinsèquement responsives
Préférer les unités relatives (%, rem, vw, fr) aux pixels fixes

Les limites :

Le responsive adapte l'affichage, pas les capacités de l'application
Pour accéder aux fonctionnalités natives du téléphone, il faut aller au-delà du web — c'est l'objet de React Native

Ressources

Responsive Web Design - A List Apart

L'article fondateur d'Ethan Marcotte qui a défini le responsive design (2010)

MDN - Responsive Design

Guide complet du responsive design sur MDN Web Docs

Documentation

Tailwind CSS - Responsive Design

Documentation officielle de Tailwind sur les breakpoints et l'approche Mobile First