01Commencer par des dimensions souples
Laissez les conteneurs s’agrandir jusqu’à une largeur maximale raisonnable au lieu d’imposer une largeur d’ordinateur à un téléphone. Ajoutez la balise meta viewport à votre document.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container { width: min(100% - 32px, 1100px); margin-inline: auto; }
img { max-width: 100%; height: auto; }
</style>02Adapter la mise en page à l’espace
Commencez par une seule colonne. Ajoutez des colonnes lorsque le contenu dispose d’assez de place, plutôt que de cibler un modèle de téléphone précis.
.cards { display: grid; gap: 16px; }
@media (min-width: 700px) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}03Tester les largeurs intermédiaires
Redimensionnez lentement, zoomez, essayez des titres longs et testez le clavier. La page doit fonctionner aussi entre vos breakpoints. N’effacez pas du contenu important juste pour le faire tenir.
04À vous de jouer
Passez de l’aperçu Étroit à Large pour voir comment les colonnes s’adaptent.
HTML et CSS uniquement. Les scripts et l’envoi des formulaires sont désactivés.
Pour aller plus loin
Consultez les guides MDN et standard HTML Living Standard pour approfondir et connaître les bonnes pratiques des navigateurs actuels.