Qu'est-ce qu'une page responsive ?
Une page responsive est une page web dont la mise en page s'adapte à la largeur de l'écran. Un même code reste lisible sur un téléphone étroit et sur un grand écran de bureau.
Deux outils suffisent pour commencer. La balise viewport règle la largeur de dessin. Les media queries changent des règles CSS selon cette largeur.
À la fin de cette leçon
Remarque
Je peux faire en sorte qu'une page s'adapte à n'importe quel écran.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Viewport | la zone de l'écran où la page est dessinée | |
| Responsive | se dit d'une mise en page qui change selon la largeur de l'écran | |
| Media query | une règle CSS qui ne s'applique que si une condition est vraie | @media (min-width: 600px) |
| Point de rupture | la largeur où la mise en page change | |
| Mobile first | on écrit d'abord les règles du téléphone, puis on ajoute celles des grands écrans | |
| Pixel CSS | l'unité de largeur du navigateur, qui n'est pas un point réel de l'écran |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Sans balise viewport, le téléphone dessine trop large
Beaucoup de téléphones dessinent d'abord une page comme si l'écran faisait environ 980 pixels de large. Puis ils la rétrécissent pour la faire tenir. Le texte devient minuscule et il faut zoomer.
La balise meta nommée viewport dit au téléphone de dessiner la page à la largeur réelle de l'écran.
La balise viewport, ligne par ligne
<head>
<meta charset="utf-8">
<!-- Sans cette ligne, un téléphone dessine la page trop large. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ma page</title>
</head>Vérifier la balise viewport dans le laboratoire
Le laboratoire contient une petite application de suivi d'habitudes dans le dossier app. Un script lit sa page et cherche la balise viewport.
Les messages du script sont en anglais. found veut dire trouvée, MISSING veut dire absente. Le Run doit afficher found, puis le contenu width=device-width, initial-scale=1, puis True.
Chercher la balise viewport
docker exec jupyter python3 steps/viewport.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Une media query agit selon la largeur
Une media query est un bloc CSS gardé par une condition. Les règles qu'il contient ne comptent que si la condition est vraie.
min-width: 900px veut dire « à partir de 900 pixels de large ». max-width: 480px veut dire « jusqu'à 480 pixels de large ».
Du CSS mobile first, ligne par ligne
/* Mobile first : la règle de base vise le téléphone. */
.liste { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* À partir de 900 px de large : deux colonnes. */
@media (min-width: 900px) {
.liste { grid-template-columns: 1fr 1fr; }
}Exemple : les règles actives selon la largeur
| Largeur de l'écran | Règle de base | À partir de 600 px | À partir de 900 px |
|---|---|---|---|
| 360 px (téléphone) | oui | non | non |
| 600 px (petite tablette) | oui | oui | non |
| 750 px (tablette) | oui | oui | non |
| 900 px (portable) | oui | oui | oui |
| 1280 px (bureau) | oui | oui | oui |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Compter les points de rupture de l'application
La feuille de style de l'application suit la méthode mobile first. Un second script compte ses media queries et lit la largeur de chacune.
Les mots width et preference du résultat sont anglais. Le Run doit afficher trois media queries. Deux sont des largeurs, 600 px et 900 px. La troisième est une préférence de thème, pas une largeur.
Lister les media queries
docker exec jupyter python3 steps/breakpoints.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Une erreur fréquente
Attention
Beaucoup pensent qu'une page qui paraît juste dans une fenêtre de bureau réduite marche aussi sur un téléphone. Faux : la fenêtre réduite montre la mise en page seulement. Elle ne montre ni la taille d'un doigt, ni la lenteur d'un réseau mobile. Servez-vous-en pour la mise en page, puis essayez sur un vrai téléphone si possible.
Pourquoi écrire d'abord pour le téléphone ?
En mobile first, la règle de base est celle du téléphone. Chaque media query ajoute ce qu'un écran plus large permet. Un téléphone lit moins de règles et la page reste simple.
Ouvrez l'aperçu du laboratoire dans votre navigateur et réduisez la fenêtre. Élargissez-la ensuite : la mise en page change aux largeurs de la table.