Sommaire

Le responsive design et les media queries Responsive design Media queries

Ce qui est appelé responsive design est un design qui va s’adapter en fonction de la taille de l’écran et de la position (portrait ou paysage) si l’appareil est une tablette ou un smartphone.

Le design va donc pouvoir s’adapter, à condition que le webmaster crée toutes les adaptations possibles. Il va falloir prévoir, si la taille de l’écran est comprise entre telles ou telles dimensions, que certains styles soient réécrits en conséquence. Et pour d’autres dimensions, ce seront toujours les mêmes styles (de classe, de balise et d’ID) qui seront réécrits pour que tous les éléments soient visibles et accessibles.

Pour détecter la résolution de l’écran, il y a les media queries, qui « interrogent » l’écran pour avoir ces informations et savoir dans quelle résolution s’affiche la page HTML. Leur type de fonctionnement est le suivant : « si la zone d’affichage de la page a une dimension comprise entre 800px et 1200px, utiliser telle feuille de style. Si c’est une autre fourchette, utiliser d’autres styles. »

Cela va demander une certaine quantité de travail, de prévoir l’affichage pour un petit téléphone et pour un grand écran. Le plus simple étant de faire le site pour un écran standard et ensuite ...