Explication détaillée des unités de taille de police CSS: PX, EM, REM,%, VW / VH et autres

CSS fournit une variété d'unités pour spécifier la longueur des attributs tels que la taille de la police, chacun avec ses différentes utilisations et méthodes de calcul. Cet article explorera ces unités en profondeur, y compris les pixels (PX), les unités EM (EM), les unités REM (REM), le pourcentage (%) et les unités de la fenêtre (VW, VH, VMIN, VMAX), etc., et analyser leur Formules de réponse.

pixels (px)

Les pixels sont des unités de taille fixe, se référant généralement aux points individuels à l'écran. Cependant, en raison de la densité de pixels de l'appareil différent, l'effet d'affichage des unités PX sur différents dispositifs peut être incohérent. Les pixels CSS calculent les tailles par des pixels de référence pour éviter ce problème. Le pixel de référence est défini comme l'angle de vision d'un seul pixel lorsque le lecteur est à un bras (à environ 28 pouces) de l'écran sur un appareil avec une densité de pixels de 96 dpi. Cela fait de la taille d'un pixel d'environ 0,26 mm.

L'utilisation de pixels pour définir des tailles de police est difficile à maintenir et hostile. Changer la police de tous les éléments d'un grand site Web sera un cauchemar. De plus, les utilisateurs ne peuvent pas ajuster la taille de la police des unités de pixels via les paramètres de taille de police du navigateur.

EM UNIT (EM)

EM peuvent éviter de remplacer les préférences des utilisateurs. La valeur de 1EM dépend de la taille de police par défaut du navigateur (généralement 16px). La valeur EM d'un élément est déterminée par la taille de police calculée dont elle hérite. Par exemple, si un élément hérite d'une taille de police de 25px, le 2EM de cet élément sera calculé comme 50px.

EM conviennent particulièrement pour définir la taille de la police des éléments connexes dans des parties indépendantes du site Web, telles que les éléments dans des modules indépendants.

Unité REM (REM)

L'unité REM résout le problème de l'héritage de la taille de la police de l'unité EM. La valeur de 1REM est toujours égale à la taille de la police de l'élément racine, simplifiant le calcul.

Les unités REM peuvent être utilisées pour définir les tailles de police du conteneur parent de différents modules indépendants, de sorte que les tailles de police de tous les éléments du module sont basées sur leurs éléments parents tout en étant indépendants d'autres modules.

pour cent (%)

Le pourcentage est similaire aux unités EM et est souvent utilisé pour définir la taille de la police de l'élément racine dans une conception Web réactive pour simplifier les calculs.

Unités de la fenêtre (VW, VH, VMIN, VMAX)

Les unités de la fenêtre permettent de régler la taille de la police de différents éléments en fonction de la taille de la fenêtre. Cela élimine la nécessité de définir différentes valeurs de taille de police à plusieurs points d'arrêt. Par exemple, 1VW est égal à 1% de la largeur de la fenêtre.

L'inconvénient des unités de la fenêtre est qu'à des tailles de fenêtre très petites ou très grandes, la taille de la police calculée peut rendre le texte difficile à lire. La solution consiste à utiliser des unités de fenêtre en combinaison avec d'autres unités.

Autres unités absolues

CSS définit également de nombreuses unités absolues, qui sont moins utiles à l'écran, mais jouent un r?le important dans l'impression de supports tels que les points (PT) et les PICAS (PC).

Réglez la taille de la police à l'aide de mots clés

La taille de la police peut être définie à l'aide de mots clés, y compris des mots clés absolus (tels que xx-small, x-small, petit, moyen, grand, x-grand et xx-grand) et des mots clés relatifs (plus grands et plus petits).

Prise en charge du navigateur

Avant d'utiliser ces unités dans un environnement de production, assurez-vous que le navigateur cible a un bon support pour cela. Des unités telles que PX, EM sont prises en charge dans tous les navigateurs traditionnels, tandis que les unités REM et de la fenêtre peuvent être mal prises en charge dans les navigateurs plus agés.

Conclusion

Les unités absolues doivent être évitées autant que possible, mais les unités relatives doivent être utilisées. L'unité EM convient pour régler la taille de la police des éléments enfants dans un module, et l'unité REM convient pour régler la taille de la police des éléments indépendants, tels que l'élément parent racine dans un module. Les unités de la fenêtre peuvent être utilisées conjointement avec d'autres unités pour s'assurer que la disposition est bien adaptée aux modifications de la largeur ou de la hauteur de la fenêtre.

Cet article a été examiné par Tom Hodgins. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!