De nombreux étudiants en conception de sites Web réactifs ont du mal à utiliser des pourcentages pour les valeurs de largeur. Plus précisément, il existe une confusion avec la façon dont le navigateur calcule ces pourcentages. Vous trouverez ci-dessous une explication détaillée du fonctionnement des pourcentages pour les calculs de largeur dans un site Web réactif.
Utilisation de pixels pour les valeurs de largeur
Lorsque vous utilisez pixels comme valeur de largeur, les résultats sont très simples. Si tu utilises CSS pour définir la valeur de largeur d'un élément dans l'en-tête d'un document à 100 pixels de large, cet élément sera le la même taille que celle que vous définissez sur 100 pixels de large dans le contenu ou le pied de page du site Web ou dans d'autres zones de la page. Les pixels sont une valeur absolue, donc 100 pixels correspondent à 100 pixels, peu importe où dans votre document un élément apparaît. Malheureusement, bien que les valeurs de pixels soient faciles à comprendre, elles ne fonctionnent pas bien avec les sites Web réactifs.
Ethan Marcotte a inventé le terme « responsive web design », expliquant cette approche comme contenant 3 principes clés:
- Une grille fluide
- Médias fluides
- Requêtes médias
Ces deux premiers points, une grille fluide et des supports fluides, sont obtenus en utilisant des pourcentages, au lieu de pixels, pour les valeurs de dimensionnement.
Utilisation de pourcentages pour les valeurs de largeur
Lorsque vous utilisez des pourcentages pour établir la largeur d'un élément, la taille réelle affichée par cet élément varie en fonction de l'endroit où il se trouve dans le document. Les pourcentages sont une valeur relative, ce qui signifie que la taille affichée est relative aux autres éléments de votre document.
Par exemple, si vous définissez la largeur d'un image à 50 %, cela ne signifie pas que l'image s'affichera à la moitié de sa taille normale. C'est une idée fausse commune.
Si une image fait en réalité 600 pixels de large, alors utiliser une valeur CSS pour l'afficher à 50 % ne signifie pas qu'elle fera 300 pixels de large dans le navigateur Web. Cette valeur en pourcentage est calculée en fonction de l'élément qui contient cette image, et non de la taille réelle de l'image elle-même. Si le conteneur (qui peut être une division ou un autre élément HTML) a une largeur de 1000 pixels, alors l'image s'affichera à 500 pixels puisque cette valeur correspond à 50% de la largeur du conteneur. Si l'élément contenant a une largeur de 400 pixels, l'image ne s'affichera qu'à 200 pixels, car cette valeur correspond à 50 % du conteneur. L'image en question ici a une taille à 50% qui dépend entièrement de l'élément qui la contient.
N'oubliez pas que le responsive design est fluide. Les dispositions et les tailles changeront au fur et à mesure que le taille de l'écran/changements de périphérique. Si vous pensez à cela en termes physiques, non liés au Web, c'est comme avoir une boîte en carton que vous remplissez de matériel d'emballage. Si vous dites que la boîte doit être à moitié remplie de ce matériau, la quantité d'emballage dont vous avez besoin variera en fonction de la taille de la boîte. Il en va de même pour les largeurs en pourcentage dans la conception Web.
Pourcentages basés sur d'autres pourcentages
Dans l'exemple image/conteneur, nous avons utilisé des valeurs de pixel pour l'élément conteneur afin de montrer comment l'image réactive s'afficherait. En réalité, l'élément contenant serait également défini en pourcentage et l'image, ou d'autres éléments, à l'intérieur de ce conteneur, obtiendraient leurs valeurs en fonction d'un pourcentage d'un pourcentage.
Voici un autre exemple.
Supposons que vous ayez un site Web où l'ensemble du site est contenu dans une division avec une classe de « conteneur » (une pratique courante de conception de sites Web). À l'intérieur de cette division se trouvent trois autres divisions que vous finirez par styliser pour les afficher sous forme de 3 colonnes verticales.
Maintenant, vous pouvez utiliser CSS pour définir la taille de cette division « conteneur » à 90 %. Dans cet exemple, la division conteneur n'a pas d'autre élément qui l'entoure que le corps, que nous n'avons défini sur aucune valeur spécifique. Par défaut, le corps sera rendu à 100 % de la fenêtre du navigateur. Par conséquent, le pourcentage de la division « conteneur » sera basé sur la taille de la fenêtre du navigateur. Au fur et à mesure que la taille de la fenêtre du navigateur change, la taille de ce "conteneur" changera également. Donc, si la fenêtre du navigateur fait 2000 pixels de large, cette division s'affichera à 1800 pixels. Ceci est calculé comme 90 pour cent de 2000 (2000 x .90 = 1800)), qui est la taille du navigateur.
Si chacune des divisions « col » trouvées dans le « conteneur » est définie sur une taille de 30 %, alors chacune d'elles aura une largeur de 540 pixels dans cet exemple. Ceci est calculé comme 30 % des 1 800 pixels rendus par le conteneur à (1 800 x 0,30 = 540). Si nous modifions le pourcentage de ce conteneur, ces divisions internes changeraient également dans la taille à laquelle elles sont rendues, car elles dépendent de cet élément de conteneur.
Supposons que les fenêtres du navigateur restent à 2000 pixels de large, mais nous modifions la valeur en pourcentage du conteneur à 80% au lieu de 90%. Cela signifie qu'il sera rendu à 1600 pixels de large maintenant (2000 x .80 = 1600). Même si nous ne changeons pas le CSS pour la taille de nos 3 divisions « col », et les laissons à 30%, ils rendu différemment maintenant puisque leur élément conteneur, qui est le contexte par lequel ils sont dimensionnés, a modifié. Ces 3 divisions seront désormais rendues avec une largeur de 480 pixels chacune, ce qui correspond à 30% de 1600, ou la taille du conteneur 1600 x 0,30 = 480).
Pour aller encore plus loin, s'il y avait une image à l'intérieur de l'une de ces divisions « col » et que cette image était dimensionnée à l'aide d'un pourcentage, le contexte de son dimensionnement serait le « col » lui-même. Au fur et à mesure que cette division "col" change de taille, l'image à l'intérieur change également. Donc, si la taille du navigateur ou du "conteneur" changeait, cela affecterait les trois divisions "col", ce qui, à son tour, changer la taille de l'image à l'intérieur du "col." Comme vous pouvez le voir, ils sont tous liés en ce qui concerne le dimensionnement basé sur le pourcentage valeurs.
Lorsque vous considérez comment un élément à l'intérieur d'une page Web sera rendu lorsqu'une valeur de pourcentage est utilisée pour sa largeur, vous devez comprendre le contexte dans lequel cet élément réside dans le balisage de la page.
En résumé
Les pourcentages jouent un rôle essentiel dans la création de la mise en page des sites Web réactifs. Que vous redimensionniez des images de manière réactive ou que vous utilisiez des pourcentages de largeur pour créer une grille vraiment fluide dont les tailles sont relatifs les uns aux autres, la compréhension de ces calculs sera nécessaire pour obtenir le look que vous le désir.