Accueil

Traduction

Débuter en HTML & CSS - sommaire

Sommaire partiellement masqué - faites défiler !

Débuter en HTML & CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Des pages 'responsive'

Une page web doit apparaitre correctement non seulement sur un grand écran (PC de bureau) mais aussi sur un petit écran (tablette et smartphone).
On dit qu'elle doit être "responsive". Il s'agit d'un vrai challenge car un écran d'ordinateur de bureau c'est plus de 1600 pixels de large alors qu'un smartphone c'est 300 pixels de large en mode portrait ...

Page responsive : solution basique

Compte tenu de l'importance croissante de l'internet mobile (internet à partir de terminaux mobiles : smartphones et tablettes) chaque page de votre site doit s'afficher correctement tant sur grands écrans (ordinateur portable ou de bureau) que sur petites écrans (tablettes et smartphone) c'est ce qu'on appelle le responsive design.
Pour certains grands sites il y a en fait deux URL : une correspondant aux terminaux fixes et une autre pour les mobiles.
Une solution plus simple à mettre en oeuvre consiste à proposer des règles de style différentes en fonction de la largeur en pixels de l'écran. C'est la technique des requêtes de média ou "media queries".
Dans le paragraphe suivant vous trouverez une présentation rapide des media queries. Mais pour l'instant je vous communique seulement quelques astuces ...

Exemple construit avec des astuces

Dans l'exemple ci-dessus je n'utilise pas encore les "media queries" mais tout simplement quelques astuces.

Le code HTML :

Donc ce code HTML nous avons cependant une nouveauté (par rapport à vos connaissances) : la balise meta viewport.

La balise meta viewport ...

L'instruction meta viewport est fondamentale dans le cadre du Web mobile et doit être insérée dans la partie HEAD de chaque page !

Les écrans des mobiles sont beaucoup plus étroits que les écrans de PC (seulement quelques centaines de pixels de large). Pour s'adapter, les navigateurs mobiles affichent par défaut le site en "dézoomant" ce qui permet d'avoir un aperçu de l'ensemble de la page mais alors c'est tellement écrit petit que ça en devient illisible ! Cette zone d'affichage simulée est appelée le viewport.

Attention la valeur du viewport ne dépend pas du terminal mais du navigateur mobile installé sur ce terminal. Ainsi le viewport est compris entre 800 pixels (Android 3) et 980 (Android 4 et Safari).

Prenons un exemple concret. Votre iphone 6 a une largeur utile d'écran de 377 par 667 pixels ; le viewport possible est de 980 pixels grâce au navigateur safari mobile qui est installé.
Mais grâce à l'instruction meta name ="viewport" content= "width=device-width, user-scalable=yes" la largeur effective ne sera plus que 377 pixels ou (667 selon l'orientation).

Analyse de la partie BODY

Deux grandes divisions : NAV & ARTICLE qui sont descendants directs de BODY.

Les éléments a, img, p, h1 & h2 sont des enfants de NAV ou de ARTICLE
Notez l'emploi des classes pour les images.

La feuille de style

Notez la règle "reset" dans la feuille de style pour annuler des formatages par défaut : taille de texte, marge, soulignement, etc.
Il s'agit de la règle de style ayant le sélecteur *
Naturellement vous devez ensuite rédéfinir des marges et des taille de texte pour les titres en particulier.
Ici taille du texte de H1 est ici égal à 140% de la taille de référence (16px) = 16 * 140% = 22px et pour H2 ...
La hauteur de ligne dans H1 & H2 = 30px et comme le texte est toujours centré verticalement dans sa ligne, le titre sera parfaitement centrée verticalement dans sa boite !

C'est ce que vous devez retenir pour l'instant du responsive design : ne pas exprimer les largeurs des boites et images en pixels mais en pourcentages !
En effet un grand écran c'est parfois 1600 pixels de large alors qu'un smartphone c'est seulement à peine 400 pixels (en orientation "portrait"). Donc pour prendre un seul exemple, une image de 500px de large serait affichée correctement sur un grand écran mais sur un écran d'ordiphone il va y avoir "dézoomage" de la page pour afficher l'image dans toute sa largeur donc le texte aura une taille minuscule et sera illisible !

Tests

Le rendu du code ci-dessus

Affichez la page à partir de votre PC puis cliquez sur l'icône "niveau inférieur" pour simuler l'affichage sur un petit écran
Ajustez ensuite la largeur avec la double flèche.

Page responsive avec requêtes de média

Pour une page "responsive" nous allons cette fois utiliser un nouvel outil CSS : les "media queries".
La solution précédente n'est pas totalement satisfaisante. Ainsi la largeur de la page égale à celle de la fenêtre c'est bien sur un petit écran mais sur un écran de PC de bureau c'est pas très ergonomique pour le regard ; on a du mal à lire le texte sur les bords.
Il faudrait plutôt une page se limitant à 1000 pixels de large avec ce type de terminal.

Grâce aux requêtes de média on peut faire ce genre de règlage dans la feuille de style.
En effet on peut tester la largeur de la fenêtre (du viewPort). Donc on peut parfaitement coder en CSS la règle suivante, à titre d'exemple :
Si largeur de la fenêtre >= 1000px alors largeur page = 1000px sinon largeur page = largeur fenêtre.

Le code correspondant

Reprenons le thème précédent.
Le code HTML sera inchangé. Les seuls changements concernent la feuille de style.

La feuille de style

Il y a aussi d'autres petits ajustements pour petits écrans.

Grande nouveauté : @media (max-width: 800px) . Il s'agit d'une 'media query'.

Tests à effectuer

le rendu du code
Affichez la page à partir de votre PC puis cliquez sur l'icône "niveau inférieur" pour simuler l'affichage sur un petit écran
Ajustez ensuite la largeur avec la double flèche.

Si vous voulez en savoir plus sur les media queries

Il y a tout un chapitre sur les media queries dans le tutoriel CSS.

Pour en savoir plus