Conception réactive

Pourquoi pas de largeurs fixes ? Un écran de bureau de 1920px de large a plus de deux fois plus d’espace qu’un laptop de 1366px. Avec des pixels, vous concevez pour un instantané ; avec des unités relatives, vous laissez le navigateur calculer. Cela ne coûte rien et donne une mise en page qui fonctionne sur toutes les largeurs entre vos points de rupture.

Étape 2 : Appliquer des images flexibles

Les images sont la cause la plus fréquente de défilement horizontal. Une image de 1200px de large dans un conteneur de 600px pousse la mise en page à se désorganiser.

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

Ajoutez ce bloc à votre feuille de style globale, pas par image. Il s’applique à tous les médias que vous ajouterez jamais. Le `height: auto` garantit que le ratio reste intact lorsque la largeur est réduite.

Pour les navigateurs modernes, vous pouvez utiliser l'attribut `srcset` pour proposer différents fichiers :

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w,
             foto-800.jpg 800w,
             foto-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Beschrijving van de afbeelding">

Le navigateur choisit lui-même le bon fichier en fonction de la taille de l’écran et de la vitesse du réseau. Vous payez ici un prix : vous devez générer et maintenir plusieurs versions de chaque image. Pour un petit site avec peu d’images, `max-width: 100%` suffit.

Étape 3 : Ajouter des media queries

Les media queries appliquent des styles de manière conditionnelle. La spécification Media Queries Level 4 est désormais la norme, mais Level 3 (de 2012) reste largement pris en charge et couvre pratiquement tous les cas pratiques.

/<em> Basisstijlen: eerst mobile </em>/
body {
    font-size: 16px;
}</p><p>/<em> Tablet: 768px en breder </em>/
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}</p><p>/<em> Desktop: 1024px en breder </em>/
@media (min-width: 1024px) {
    .col-main {
        grid-column: span 8;
    }
    .col-side {
        grid-column: span 4;
    }
}

Si vous écrivez d’abord les styles mobiles et que vous étendez ensuite avec des media queries `min-width`, vous n’avez pas besoin d’annuler les styles sur les petits écrans. Cela garde votre CSS lisible. L’envers de la médaille : vous devez réfléchir consciemment aux styles que vous voulez sur mobile, au lieu de construire d’abord le bureau et de réduire ensuite.

Étape 4 : Configurer la balise meta viewport

Sans cette balise, un navigateur mobile traite votre page comme une fenêtre de bureau de 980px de large et la réduit. Vos media queries ne fonctionnent alors jamais comme prévu.

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

Cette règle indique au navigateur que la viewport correspond à la largeur réelle de l'écran de l'appareil. `initial-scale=1.0` garantit qu'aucun niveau de zoom par défaut n'est appliqué. Placez cette balise dans la `` de chaque page que vous souhaitez rendre responsive.

Étape 5 : Mettre à l'échelle la typographie avec des unités relatives

Les tailles de police fixes en pixels fonctionnent sur chaque écran, mais elles ne s'adaptent pas. Utilisez `rem` pour les tailles de police — 1 rem équivaut à la taille de police racine, par défaut 16px.

html {
    font-size: 16px;
}</p><p>h1 {
    font-size: 2rem; /<em> 32 px </em>/
}</p><p>h2 {
    font-size: 1.5rem; /<em> 24 px </em>/
}</p><p>body {
    font-size: 1rem; /<em> 16 px </em>/
}

Si plus tard tu veux adapter les tailles de base par point de rupture, tu ne modifies que le `font-size` sur `html` et tout le reste suit. Si un visiteur utilise une taille de police par défaut plus grande dans son navigateur, ton site respecte ce choix — ce qui est impossible avec des pixels.

Étape 6 : Choisir les points de rupture en fonction du contenu

L’erreur la plus courante est de lier les points de rupture à des appareils spécifiques. L’iPhone 14 Pro fait 393 px de large, le Pixel 8 fait 412 px. Dans un an, ces chiffres auront changé. Choisis des points de rupture là où ta mise en page se casse : là où le menu latéral devient trop étroit, là où la colonne de texte devient trop longue.

/<em> Waar de layout begint te knellen </em>/
@media (min-width: 45rem) { /<em> 720px </em>/
    .grid {
        grid-template-columns: repeat(12, 1fr);
    }
}</p><p>@media (min-width: 70rem) { /<em> 1120px </em>/
    .nav {
        display: flex;
        justify-content: space-between;
    }
}

Une mise en page sur deux colonnes n’a besoin que de deux ou trois breakpoints. Chaque media query supplémentaire signifie plus de maintenance et plus de combinaisons possibles à tester. Commencez avec un seul breakpoint vers 768px et n’en ajoutez un deuxième que si la mise en page le demande.

Étape 7 : Tester dans le navigateur

Les outils de développement de votre navigateur disposent d’un mode d’affichage pour appareils. Dans Chrome 120+ et Firefox 115+, vous pouvez basculer entre des presets comme iPhone et iPad, ou saisir une largeur personnalisée.

Ouvrez les outils de développement avec F12, cliquez sur l’icône d’appareil (Chrome) ou l’icône de conception responsive (Firefox), et faites glisser la fenêtre d’affichage à différentes largeurs. Vérifiez à 320px, 768px et 1440px qu’aucun défilement horizontal n’apparaît et qu’aucun élément ne se chevauche.

<h2>Vérifiez si le site défile horizontalement (à exécuter dans la console des outils de développement)</h2>
document.documentElement.scrollWidth <= window.innerWidth

Cette ligne renvoie `true` si tout tient dans la fenêtre d’affichage. Si le site déborde quand même, vous trouverez le coupable en sélectionnant chaque élément dans les outils de développement et en regardant quel élément est plus large que son conteneur.

Vérification

Ouvrez votre site à au moins trois largeurs — un écran mobile étroit (320px), une tablette (768px) et un ordinateur de bureau (au moins 1280px). Vérifiez à chaque format :

<h2>Via la ligne de commande avec curl et un user-agent</h2>
curl -s -o /dev/null -w "%{http_code}" https://jouwsite.nl

Cette vérification confirme seulement que le serveur est accessible. Le vrai test est visuel. Redimensionnez lentement la fenêtre de votre navigateur, du large au étroit. Des transitions fluides signifient que vos grilles fluides et vos images flexibles sont bien configurées. Des sauts brusques à des points fixes correspondent à vos media queries — c’est normal. Un site qui ne défile jamais horizontalement et où les textes et images restent lisibles est responsive.

Problèmes fréquents

Défilement horizontal sur mobile malgré `max-width: 100%`

Un élément dans votre mise en page est plus large que le conteneur. Cela peut être un bloc `pre` avec du code long, un tableau ou un élément avec une largeur fixe en pixels. Trouvez-le avec la vérification console ci-dessus et ajoutez :

pre, table {
    overflow-x: auto;
}

Les media queries ne fonctionnent pas sur mobile

Vous n’avez pas ajouté la balise meta viewport, ou elle n’est pas dans le `` mais ailleurs sur la page. Sans cette balise, le navigateur mobile utilise une fenêtre d’affichage virtuelle de 980px et vos media queries basées sur `min-width` ne seront jamais actives.

Les images se redimensionnent mais restent lourdes à charger

`max-width: 100%` réduit visuellement une image, mais le fichier reste aussi lourd. Une image de 1600px de 800KB sera toujours téléchargée en 800KB sur mobile. Utilisez `srcset` et `sizes` pour proposer des fichiers plus petits pour les petits écrans. Des générateurs comme `sharp` (Node.js 18+) ou `ImageMagick 7` peuvent produire les variantes automatiquement.

Le design responsive n’est pas une technique séparée que l’on active, mais une façon de construire qui se retrouve dans chaque décision CSS. Les largeurs fixes sont l’exception, les unités relatives la règle. Qui suit ce modèle une fois ajoute naturellement des composants responsives — et les media queries deviennent de moins en moins nécessaires à mesure que les grilles et images sont plus flexibles. La prochaine fois que vous rencontrez un `width: 1200px` fixe, demandez-vous pourquoi il est encore là.