Wrapper

Problème et solution

De plus en plus de très grands écrans sont vendu. Il est possible que vous en ayez un chez vous. Si c'est le cas, vous avez peut-être remarqué que lire un texte ou de l'information sur ce genre d'écran est très difficile si la fenêtre de l'application est en plein écran. En effet, le contenu est tellement étiré de gauche à droite qu'il devient hardue de suivre sur quelle ligne nous sommes rendu et force le lecteur à tourner le cou pour être capable de lire le texte en entier.

Pour éviter ce genre de problèmes, la plupart des site web utilise un technique qui s'appelle le "Wrapper". Cette technique consiste à donner une largeur maximale au contenu de la page et généralement à le centrer avec la technique du margin à auto.

Solution plus complexe

Cette technique est très pratique, mais peut parfois rendre le design un peu plus complexe. Par exemple, il est fort probable que vous ayez à mettre un header de couleur jusqu'aux bords de l'écran, mais où le contenu est condensé dans un wrapper. Dans ce genre de cas, vous aurez besoin d'organiser les éléments avec des <div>.

Largeur maximale

La propriété max-width est une propriété particulière qui limite un élément pour qu'il ne devienne jamais plus grand qu'une certaine valeur. Cette propriété est très pratique dans les designs fluides où la taille des éléments peut changer en fonction de la taille du navigateur.

Il existe d'autres propriétés similaire, comme min-width, min-height et max-height. Ces propriétés ont la même raison d'être que le max-width.