De nombreux étudiants en conception Web réactive ont de la difficulté à utiliser les pourcentages pour les valeurs de largeur. En particulier, il existe une confusion avec la manière 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 adaptatif.
Utilisation de pixels pour les valeurs de largeur
Lorsque vous utilisez des pixels en tant que valeur de largeur, les résultats sont très simples. Si vous utilisez CSS pour définir la valeur de largeur d'un élément dans l'en-tête d'un document sur une largeur de 100 pixels, cet élément aura la même taille que celui défini pour une largeur de 100 pixels dans le contenu ou le pied de page du site Web ou dans d'autres zones de la page. page. Les pixels sont une valeur absolue. Par conséquent, 100 pixels correspond à 100 pixels, quel que soit l'endroit où un élément apparaît dans votre document. 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 «conception de site Web adaptatif», expliquant cette approche comme contenant 3 principes clés:
- Une grille fluide
- Fluide fluide
- Requêtes médias
Ces deux premiers points, une grille de fluide et un support de fluide, sont obtenus en utilisant des pourcentages au lieu de pixels pour le dimensionnement des valeurs.
Utilisation de pourcentages pour les valeurs de largeur
Lorsque vous utilisez des pourcentages pour établir une largeur pour un élément, la taille réelle d'affichage de cet élément varie en fonction de sa position dans le document. Les pourcentages sont des valeurs relatives, 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'une image sur 50%, cela ne signifie pas signifie que l'image sera affichée à la moitié de sa taille normale. C'est une idée fausse commune.
Si une image a une largeur native de 600 pixels, 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 contenant cette image, et non de la taille native 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, l’image s’affichera à 500 pixels, car 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 de 50% qui dépend complètement de l'élément qui la contient.
Rappelez-vous, la conception sensible est fluide. Les dispositions et les tailles changeront en fonction de la taille de l'écran / du périphérique. Si vous pensez à cela en termes physiques et non Web, c'est comme si vous remplissiez une boîte en carton avec du matériel d'emballage. Si vous dites que la boîte doit être remplie à moitié avec ce matériau, la quantité d’emballage dont vous aurez besoin variera en fonction de la taille de la boîte. Il en va de même pour les pourcentages de largeur dans la conception Web.
Pourcentages basés sur d'autres pourcentages
Dans l'exemple image / conteneur, nous avons utilisé les valeurs en pixels de l'élément conteneur pour montrer le mode d'affichage de l'image réactive. En réalité, l'élément contenant serait également défini en tant que pourcentage et l'image, ou d'autres éléments, à l'intérieur de ce conteneur, obtiendrait leurs valeurs en fonction d'un pourcentage de pourcentage.
Voici un autre exemple qui montre cela dans la pratique.
Supposons que vous ayez un site Web où le site entier 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 pourrez éventuellement afficher sous forme de 3 colonnes verticales. Ce HTML peut ressembler à ceci:
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 l'entourant que le corps, que nous n'avons défini à 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. Comme la taille de la fenêtre du navigateur change, la taille de ce «conteneur» changera également. Donc, si la fenêtre du navigateur a une largeur de 2000 pixels, cette division sera affichée à 1800 pixels. Cela correspond à 90% de 2000 (2000 x .90 = 1800), soit la taille du navigateur.
Si chacune des divisions «col» présentes dans le «conteneur» est définie sur une taille de 30%, chacune d'entre elles aura une largeur de 540 pixels dans cet exemple. Cela correspond à 30% des 1 800 pixels restitués par le conteneur (1 800 x 0,30 = 540). Si nous changions le pourcentage de ce conteneur, ces divisions internes changeraient également dans la taille de rendu, car elles dépendent de l'élément contenant.
Supposons que la fenêtre du navigateur conserve une largeur de 2 000 pixels, mais que nous modifions la valeur en pourcentage du conteneur à 80% au lieu de 90%. Cela signifie que le rendu sera maintenant à 1600 pixels de large (2000 x .80 = 1600). Même si nous ne modifions pas les CSS pour la taille de nos 3 divisions «col» et les maintenions à 30%, elles seront rendues différemment car leur élément conteneur, le contexte dans lequel elles sont dimensionnées, a changé. Ces trois divisions auront désormais une largeur de 480 pixels, ce qui correspond à 30% de 1600, soit la taille du conteneur (1600 x .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.La taille de cette division en «col» changeant en taille, il en irait de même pour l'image à l'intérieur. Donc, si la taille du navigateur ou du "conteneur" change, cela affectera les trois divisions "col", ce qui modifiera la taille de l'image à l'intérieur du "col". Comme vous pouvez le voir, ce sont toutes connecté en ce qui concerne les valeurs de dimensionnement en pourcentage.
Lorsque vous envisagez le rendu d’un élément d’une page Web 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 pour les sites Web réactifs. Que vous dimensionniez les images en fonction de vos besoins ou que vous utilisiez des pourcentages de largeur pour créer une grille réellement fluide dont les tailles sont relatives les unes aux autres, il est nécessaire de comprendre ces calculs pour obtenir le look souhaité.
