Webmaster - Adapter un site à toutes les résolutions

Décembre 2016

Une question récurrente sur ce forum est "Comment adapter mon site à la résolution du visiteur ? Quelle résolution choisir ?"

Pas besoin de se compliquer la vie pour ça !

Comment faire


Il suffit d'appliquer une largeur relative (=qui change selon la taille de la fenêtre et de l'écran du visiteur) à la page.

Le plus courant est d'utiliser la balise body.
A vous d'adapter si vous utilisez un div#corps ou autre.

Pour adapter la taille de la page, il faut utiliser ce code CSS :
  body{width:100%;}

Avec ce code la page prendra 100% de la fenêtre, quelle que soit sa taille.

On peut évidemment définir la largeur que l'on veut (90%, 80%, etc.)

Si l'on définit une plus petite largeur, on peut centrer avec "margin:auto".

Note


Attention : il faut définir une largeur en %, et pas en em ou autre unité relative, car les % correspondent à un pourcentage par rapport à la largeur de la fenêtre contrairement aux em qui correspondent aux hauteurs de ligne (une taille prédéfinie).
(Vous n'êtes pas obligé de retenir ceci, si ça vous embrouille ne vous en occupez pas et contentez-vous de suivre les indications suivantes ;-)

Précisions


S'il est important que votre page ne soit pas plus petite qu'une certaine taille, on peut utiliser la propriété min-width (qui ne fonctionne pas sous IE).

On peut également utiliser max-width pour définir la taille maximale.
(Je déconseille cette pratique car ce n'est pas agréable d'avoir une page qui est plus petite que la fenêtre je trouve)

Exemple


Une page de largeur 90%, centrée, une largeur minimale de 600 pixels, et une largeur maximale de 2000 pixels :
  body{width:90%;margin:auto;min-width:600px;max-width:2000px}

Autres


Quelques liens pour le min-width et compagnie sous IE :

A voir également :

Ce document intitulé «  Webmaster - Adapter un site à toutes les résolutions  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.