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 :
Avant de dérouler : vous avez écrit un site responsive avec des media queries, mais vous avez oublié la balise <meta name="viewport">. Sur un téléphone, à quoi ressemble la page : adaptée au petit écran, ou autre chose ? Pourquoi les media queries ne se déclenchent-elles pas ?
Voir la réponse
Sans la balise viewport, le navigateur mobile suppose une largeur d'écran « de bureau » d'environ 980 px : il affiche la page à cette largeur, puis dézoome le tout pour le faire tenir dans l'écran physique. Résultat : une page miniaturisée, illisible, qu'il faut zoomer à la main. Pire, comme le navigateur croit être sur un écran de 980 px, une media query mobile type @media (max-width: 768px) ne se déclenche jamais : tout votre travail responsive est ignoré. L'unique ligne qui règle tout : <meta name="viewport" content="width=device-width, initial-scale=1">.
<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 : 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:
Before you scroll down: you have written a responsive site with media queries, but you forgot the <meta name="viewport"> tag. On a phone, what does the page look like: adapted to the small screen, or something else? Why don't the media queries fire?
See the answer
Without the viewport tag, the mobile browser assumes a “desktop” screen width of around 980 px: it renders the page at that width, then zooms out to fit it on the physical screen. The result is a tiny, unreadable page that users have to pinch-zoom manually. Worse, because the browser thinks it is on a 980 px screen, a typical mobile media query like @media (max-width: 768px) never fires — all your responsive work is ignored. The single line that fixes everything: <meta name="viewport" content="width=device-width, initial-scale=1">.
<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: 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!
🎯 Pratique
S'entraîner (clique pour ouvrir) :
✨ Prompt 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 ?
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.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).
⚖️ Juge 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; }
}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 ?
<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é.<html> ?clamp(1rem, 3vw, 2.5rem) ?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 →