CSS : un site adapté aux téléphones (responsive, media queries)

Indispensable

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

Mobile d'abord

.colonnes { display: grid; gap: 16px; }
@media (min-width: 768px)  { .colonnes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .colonnes { grid-template-columns: repeat(3, 1fr); } }

Fluide

• img, video { max-width: 100%; height: auto; }
• font-size: clamp(1.6rem, 4vw, 2.8rem)
• Largeurs en %, max-width plutôt que width fixe.
• Zones tactiles d'au moins 44 px.

Tester : outils de développement (Ctrl + Maj + M) et un vrai téléphone. Grilles automatiques : CSS Grid.