Chargement...
HTML responsive
Après la mise en page, le responsive : même URL sur téléphone et bureau. HTML commence par viewport ; CSS termine.
Une URL, plusieurs largeurs
Pas de HTML mobile séparé. L’habitude 1200px provoque un défilement horizontal.
Réponse directe
1) meta viewport. 2) largeurs fluides. 3) img max-width:100%. Les media queries sont un sujet CSS.
📊 HTML unlocks vs CSS responsive tools
| Layer | Job for responsiveness | Examples |
|---|---|---|
| HTML viewport | Tell mobile browsers how to size the layout viewport | meta name="viewport" with width=device-width |
| HTML structure | Keep landmarks and flexible wrappers that can reflow | header, main, aside, div.row (from layout) |
| CSS fluid sizing | Let boxes and images shrink instead of overflow | max-width, %, height: auto |
| CSS adaptation | Change columns and spacing at breakpoints | media queries, flex/grid tweaks (CSS courses) |
| Avoid | Huge fixed pixels and layout tables fighting narrow screens | width="1200", whole-page table chrome |
Meta viewport — pièce HTML essentielle
Sans elle, beaucoup de téléphones réduisent un canevas bureau — texte minuscule.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>
Lire la ligne viewport
- name=viewport est l’interrupteur
- width=device-width = largeur appareil
- initial-scale=1.0 = 100%
- CSS reste nécessaire
Images fluides — balise HTML + échelle CSS
img avec alt ; l’échelle est CSS.
<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">
Lire la règle fluide
- max-width:100%
- height:auto garde le ratio
- width=1200 déborde sur téléphone
HTML débloque ; CSS termine
Viewport et structure flexible = HTML. Colonnes fluides et breakpoints = CSS.
Pratique — labo de redimensionnement
- Ajouter viewport
- Image large + CSS fluide
- Rétrécir la fenêtre
- Tester width=1200 un instant
Erreurs fréquentes
- oublier viewport
- médias fixes 1200px
- mythe HTML seul
- tableaux de layout
Résumé
- viewport est essentiel
- images fluides aident
- HTML + CSS
- ensuite : formulaires
🧠 Testez Vos Connaissances
Prêt à Commencer
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
5
Questions
70%
Pour Réussir
∞
Temps
∞
Tentatives
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut