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 : 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: 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!
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.
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).
<html> ?clamp(1rem, 3vw, 2.5rem) ?