Responsive Design, c’est facile

Pourquoi afficher une page à une largeur fixe ? Il faut présumer que le visiteur a une fenêtre qui lui convient.

Et si on affichait la page à la taille de la fenêtre ?

Si on fait une page de référence à 1000 px de large, c’est très facile de faire en sorte que la page remplisse parfaitement n’importe quelle fenêtre.

Il suffit de faire deux choses :

1. Dans la balise <head>, un peu de javascript

<script>
  // 1 rem = 1/100 de la largeur de la fenêtre
  var monRem = window.innerWidth/100;
  document.documentElement.style.fontSize = monRem+'px';
</script>

2. Partout ailleurs on utilise l’unité REM au lieux de PX, et on met 1/10 la quantité voulue :

font: normal 1.0/1.2REM verdana, sans serif;

Voici une exemple d’un page qui a été construite en moins d’une heure en utilisant cette technique. La page s’affiche correctement dans tous les navigateurs, sur toutes les plates-formes.

Il faut savoir que si le visiteur modifie sa fenêtre, la page n’est plus à la bonne échelle.

La solution (expliquée ici) est de redessiner la fenêtre quand le visiteur la modifie.

N.B. On ne peut pas faire en sorte que 1 REM = 1 PX parce qu’Internet Explorer arrondit trop les valeurs. Le calcul ci-dessus donnerait monRem = 1.1321, ce que IE arrondit à 1.13. Ce n’est pas assez précis pour bien aligner les éléments de la page.

Leave a Reply

Your email address will not be published. Required fields are marked *