Les terminaux sont de plus en plus divers. Certains écrans sont petits avec une grande résolution (smartphone moderne), alors que d'autres sont assez grands mais accusent une résolution moindre. D'une manière générale, l'ordinateur de bureau affiche en mode 'Paysage', alors que les téléphones et tablettes affichent aussi bien en mode 'Portrait' que 'Paysage'. L'information doit pouvoir être adaptée à chaque écran.
Le CSS (depuis CSS3) va permettre d'assurer l'optimisation de l'affichage en fonction de l'écran de l'utilisateur.
Mais il faudra d'abord renseigner dans l'entête de la page une instruction, grâce à un tag 'meta', puis renseigner aussi les propriétés et valeurs css dans des 'class'.
1 <meta name="viewport" content="width=device-width, initial-scale=1.0>
Il reste à détecter les propriétés de l'écran grâce à un ou des tags CSS @media et aux directives indiquant des propriétés à prendre en compte. Dans l'exemple ci-dessous, la taille maximum de 600px permet de réagir aux téléphones mobiles. Ce qui permet d'adapter l'affichage pour un écran de smartphone.
1 @media only screen and (max-width: 600px) {
2 ...
3 }
Pour les autres écrans, il suffira de définir d'autres valeurs dans d'autres zones @media, telles que 768px pour le mode 'paysage' des tablettes, ou limiter au minimum à 992px pour les écrans d'ordinateurs portables, etc.
1 @media only screen and (min-width: 992px) {
2 ...
3 }
Pour afficher les informations sur la page, il faudra utiliser des 'conteneurs'
qui pourront être repositionner selon l'écran.
Dans l'idéal un 'conteneur' pour le 'corps', puis d'autres 'conteneurs' qui sont des blocks repositionnables.
1 ...
2 <div class="Corps">
3
4 </div>
5 ...
et le 'conteneur' corps contiendra...
1 <div class="zone-Gauche">
2 ---...---
3 </div>
4
5 <div class="zone-Droite">
6 ***
7 </div>
8
9 <div class="zone-Pied">
10 ...---...
11 </div>
12
Il faut maintenant adapter chaque propriété css pour chaque zone et chaque élément, et l'affichage changera en fonction de la taille de l'écran.
Exemple de code responsive pour le téléphones mobiles.
le HTML (dans l'entête)
1 <meta name="viewport" content="width=device-width, initial-scale=1.0>
le CSS:
1 @media only screen and (max-width: 600px) {
2 .Corps{
3 width:100%;
4 padding:6px;
5 }
6 ...etc.
7 .
8 }
depuis le 14/01/2019
