Un regard à la longueur des unités en CSS

Explication détaillée des unités de longueur CSS: de l'absolu au relatif, puis au lien de la fenêtre

La mesure précise est une partie cruciale de la conception Web. La présence d'au moins dix unités de longueur différentes dans CSS est suffisante pour l'illustrer. Chaque unité a son propre objectif spécifique, permettant à la page Web de mieux s'adapter à divers appareils. Une fois que vous maîtrisez ces unités, vous pouvez ajuster plus précisément la taille de l'élément. Ce tutoriel explorera les différentes unités disponibles dans CSS et discutera dans les circonstances quelles unités sont utilisées et comment les utiliser.

points clés

• CSS propose une variété d'unités de longueur, chaque unité avec son objectif spécifique, permettant aux pages Web de mieux s'adapter à différents appareils. Ces unités peuvent être à peu près divisées en unités de longueur absolue, unités de longueur relative et unités de longueur relative de la fenêtre.
• Les unités de longueur absolue (telles que les pixels, les pouces, les millimètres et les centimètres) représentent des mesures physiques et ne sont pas affectées par la taille ou la résolution de l'écran. Cependant, ils peuvent ne pas convenir aux appareils numériques ou à des situations où la résolution est inconnue.
• Les unités de longueur relative (y compris les unités EM, REM et de la fenêtre) ajustent leurs valeurs en fonction d'autres valeurs ou caractéristiques prédéfinies, ce qui les rend idéales pour créer des dispositions réactives. Ils peuvent être relatifs à la police utilisée, ou à la hauteur et à la largeur de la fenêtre de l'écran.
• La longueur relative de la fenêtre est basée sur la hauteur et la largeur de la fenêtre. Ces unités (y compris VH (hauteur de la fenêtre), VW (largeur de la fenêtre), VMIN (fenêtre minimum) et VMax (Vieille maximum)) peuvent être utilisées pour mettre à l'échelle des éléments en fonction de la taille de la fenêtre du navigateur.

unité de longueur absolue

Les unités absolues sont des représentations numériques des mesures physiques réelles. Ces unités n'ont rien à voir avec la taille de l'écran ou sa résolution. Par conséquent, les unités de longueur absolue ne conviennent pas pour une utilisation sur les appareils numériques ou lorsque la résolution est inconnue. Ces unités sont plus adaptées lorsque vous concevez des supports physiques tels que l'impression.

Les unités absolues incluent:

• cm (cm)
• mm (mm)
• dans (pouce)
• PC (réservation de cartes)
• pt (lb)
• px (pixel)

Notez que le projet d'édition des spécifications comprend également des unités de quart de millimètre (Q), mais il s'agit d'une nouvelle unité qui ne semble prendre en charge aucun navigateur.

Vous pouvez remarquer que lorsque vous utilisez une longueur absolue, la même valeur de la même unité aura un effet d'affichage différent sur différents écrans. En effet, le DPI de l'écran (points par pouce) est différent. Les écrans haute résolution ont un DPI plus élevé que les écrans à basse résolution, donc les images ou le texte semblent plus petits.

Les pixels les plus utilisés de toutes les unités absolues sont les pixels (PX). Les pixels sont souvent compris comme des points uniques à l'écran, bien que techniquement, il est plus complexe que cela. Il s'agit de la plus petite unité de mesure et est généralement utilisée comme référence pour d'autres unités.

D'autres unités (comme les pouces, les millimètres et les centimètres) représentent la taille physique de ces unités. Les unités de livres (PT) représentent 1/72 pouces et les unités de carte (PC) représentent 1/6 de pouce. Voici quelques codes CSS qui utilisent six unités absolues courantes:

<code class="language-css">p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}</code>

Demo de codepen

Unités de longueur relative

Comme son nom l'indique, il n'y a pas de valeur fixe pour les unités relatives. Leurs valeurs sont relatives à certaines autres valeurs ou propriétés prédéfinies. Les unités relatives facilitent le réglage correctement de la taille de l'élément, car nous pouvons associer leur largeur, leur hauteur, leur taille de police, etc. à certains autres paramètres de référence.

Lors de la création de dispositions réactives, ces unités sont généralement recommandées et sont plus adaptées aux médias numériques. Leurs valeurs peuvent être relatives à la police que vous utilisez, ou à la hauteur et à la largeur de la fenêtre de l'écran.

Les unités relatives incluent:

• ex (x hauteur)
• ch (caractère)
• em (nommé d'après les imprimes, mais pas les mêmes)
• rem (root em)

Jetons un coup d'œil à ces unités plus en détail.

x hauteur (ex) et les unités de caractère (ch)

Les unités ex sont rarement utilisées dans le développement. 1EX est égal à la taille du bas de la boîte "x" de la police utilisée. Dans la plupart des cas, la valeur de 1EX est presque égale à 0,5em. Cependant, cela variera selon la police. Cette unité peut être considérée comme une unité équivalente verticale d'EM.

<code class="language-css">p {
  font-size: 2ex;
}</code>

Caractère (CH) L'unité est liée au caractère "0". 1ch est la mesure d'avancement du caractère "0" dans la police.

<code class="language-css">p {
  margin: 2ch;
}</code>

EM Unité

La valeur de l'unité est égale à la taille de la police de l'élément de base ou de l'élément parent. Par exemple, si l'élément parent a une taille de police de 20px, la valeur de 1EM sera calculée comme 20px pour tous les enfants directs. La taille de la police des éléments enfants peut être facilement augmentée ou diminuée en fonction des unités de base. Le nombre ne doit pas être un entier.

L'utilisation d'EM nous permet de conserver facilement les tailles de police de divers éléments à une échelle fixe. Par exemple, si la valeur de taille de police de l'élément parent est de 50px, la définition de la taille de la police de l'élément enfant sur 2EM sera la même que de la régler à 100px. De même, le régler sur 0,5EM fera la taille de la police de l'élément enfant 25px.

La démonstration suivante montre un exemple simple du fonctionnement de l'unité EM:

Demo de codepen

Cependant, parfois les unités EM produisent des résultats indésirables dans le cas d'éléments imbriqués. En effet, la valeur EM prend une valeur marquée directement par un parent, donc chaque élément enfant imbriqué aura la même valeur EM, mais la valeur calculée est différente car la valeur calculée est toujours relative à son parent direct. Donc, si nous devons définir la valeur de l'élément actuel sur la proportion de l'élément parent par rapport à l'élément parent non direct ou à l'élément parent non racinaire, cela le rend difficile.

Ce qui suit est une démonstration montrant l'effet de nidification d'exception des unités EM. Pour cet exemple, nous supposons que la taille de la police de référence dans le document est 16px (c'est généralement la valeur par défaut):

Demo de codepen

Veuillez noter les éléments imbriqués en HTML, le contenu de chaque élément déclare la taille de la police calculée.

Ce qui suit est le CSS pour cet exemple:

<code class="language-css">p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}</code>

Vous pouvez voir que même si tous les éléments div sont définis comme 1.15EM, leurs tailles de police réelles sont différentes car elles sont imbriquées.

REM Unit

C'est là que l'unité REM est utile. La valeur de REM est toujours égale à la taille de la police de l'élément racine (élément HTML dans les documents HTML). Les démos REM sont similaires à celles des unités EM. Voici CSS:

<code class="language-css">p {
  font-size: 2ex;
}</code>

Il s'agit d'une simple démo avec la même nidification que la démo précédente, mais cette fois en utilisant Rem:

Demo de codepen

Notez que la nidification existe toujours maintenant, mais n'affecte pas la taille de la police calculée des éléments imbriqués.

Unité de longueur relative de la fenêtre

La longueur relative de la fenêtre est basée sur la hauteur et la largeur de la fenêtre. Une fenêtre ou une fenêtre est une zone ou un espace de cadre visible à l'écran.

Les unités relatives de la fenêtre incluent:

• VH (hauteur de la fenêtre)
• VW (largeur de la fenêtre)
• VMIN (Valeur minimale de la fenêtre)
• vmax (valeur maximale de la fenêtre)

Hauteur de la fenêtre (VH) et largeur de la fenêtre (VW)

Les unités

VH sont fortement corrélées avec la fenêtre. La valeur de VH est égale à 1/100 de la hauteur de la fenêtre. Cette unité est utile si nous voulons mettre à l'échelle des éléments en fonction de la hauteur de la fenêtre du navigateur. Par exemple, si la hauteur de la fenêtre est de 400px, 1VH est égal à 4px. Si la hauteur de la fenêtre est de 800px, 1VH est égal à 8px.

Tout comme VH est lié à la hauteur de la fenêtre, les unités VW sont fortement corrélées à la fenêtre. Par conséquent, la valeur de 1VW peut être dérivée de la même manière. Cela signifie que 1VW est égal à 1/100 de la largeur de la fenêtre. Par exemple, si la largeur de la fenêtre est de 1200px, alors 1VW est de 12px. Utilisez des unités de fenêtre pour définir la largeur, la hauteur et remplir les CS de l'élément à:

<code class="language-css">p {
  margin: 2ch;
}</code>

Demo de codepen

Version Minimum (VMIN) et Unités maximales de la fenêtre (VMAX)

L'unité VMIN est associée à un bord de la fenêtre avec une valeur inférieure, il peut donc être de hauteur ou de largeur. La valeur de 1 VMIN est égale à 1/100 du bord le plus court de la longueur. Par exemple, si la taille de la fenêtre est de 500 x 700, la valeur de 1 VMIN est égale à 5px. Si la taille est de 1000 x 700, la valeur est 7px.

En revanche, VMax prend en compte la valeur maximale de la fenêtre. Le facteur d'échelle est toujours 1/100, donc 1Vmax est égal à 1/100 du bord avec une valeur plus élevée. En utilisant le même exemple que ci-dessus, si la taille de la fenêtre est de 500 x 700, la valeur de 1Vmax est égale à 7px. Si la taille est de 1000 x 700, la valeur est de 10px. Voici le CSS utilisant VMIN et VMAX pour définir la largeur et la hauteur:

<code class="language-css">div {
  font-size: 1.15em;
}

span {
  font-size: 2em;
}</code>

Demo de codepen

Prise en charge du navigateur

em, ex, px, cm, mm, in, pt et pc Tous les navigateurs le soutiennent, y compris IE plus âgé.

ch Firefox, Chrome 27, IE 9, Safari 7 et Opera 20.

rem Tous les navigateurs utilisent le support, y compris IE9. Si vous avez besoin de plus de soutien, voici un polyfill.

VW, VH et VMIN Chrome 20, IE 9, Firefox 19, Safari 6 et Opera 20. Une chose qui mérite d'être rappelée est que dans Internet Explorer, VMIN est pris en charge via une syntaxe VM non standard. Pour Polyfill, vous pouvez essayer VMinpoly ou utiliser -prefix sans le plugin et le plugin.

vmax Chrome 20, Firefox 19 et Opera 20, et Safari 6.1. IE ne le soutient pas. Vous pouvez essayer ce polyfill pour obtenir un support hacky et aider avec certains bogues dans différents navigateurs mobiles.

Conclusion

Ce tutoriel introduit brièvement les différentes unités de longueur disponibles dans CSS, y compris de nombreuses unités qui facilitent les mesures de mise en page et de dispositifs transversales. Avez-vous utilisé des unités REM ou de la fenêtre dans n'importe quel projet? Comment est votre expérience? Veuillez partager des conseils ou des problèmes que vous rencontrez lorsque vous utilisez ces unités dans la section des commentaires.

FAQ de l'unité de longueur CSS

Quels sont les différents types d'unités de longueur CSS?

Les unités de longueur CSS sont utilisées pour spécifier la taille de divers éléments sur une page Web. Il existe deux types d'unités de longueur dans CSS: les unités absolues et les unités relatives. Les unités absolues sont fixes et leur taille ne sera pas modifiée en fonction de toute autre propriété de la page. Ils comprennent des pixels (PX), des livres (PT), des picas (PC), des pouces (in), des centimètres (cm) et des millimètres (mm). D'un autre côté, l'unité relative est relative à une autre valeur de longueur. Ils incluent EM, EX, CH, REM, VW, VH, VMIN, VMAX et pourcentage (%).

Comment choisir la bonne unité de longueur CSS pour mon projet?

La sélection des unités de longueur CSS dépend des exigences spécifiques du projet. Si vous avez besoin d'une taille fixe qui ne changera pas quelle que soit la taille de l'écran ou la taille de la police, vous devez utiliser des unités absolues. Cependant, si vous souhaitez que votre conception soit réactive et s'adapte à différentes tailles d'écran ou tailles de police, vous devez utiliser des unités relatives.

Quelle est la différence entre les unités "EM" et "REM" dans CSS?

"em" et "rem" sont des unités relatives dans CSS. La taille de la police de l'unité "EM" par rapport à son élément parent le plus proche. D'un autre côté, "REM" signifie "Root EM", par rapport à l'élément racine (HTML), plutôt qu'à l'élément parent. Cela signifie que le «REM» sera toujours cohérent quel que soit le niveau de nidification, ce qui facilite le contrôle de la taille globale en CSS.

Comment fonctionnent les unités "VW" et "VH" dans CSS?

Les unités de "VW" (largeur de la fenêtre) et "VH" (hauteur de la fenêtre) en CSS sont des unités relatives, représentant le pourcentage de largeur et de hauteur de la fenêtre, respectivement. Une unité de "VW" est égale à 1% de la largeur de la fenêtre, et une unité de "VH" est égale à 1% de la hauteur de la fenêtre. Ces unités sont particulièrement utiles pour créer des conceptions réactives qui correspondent à la taille de la fenêtre.

Puis-je mélanger différentes unités de longueur CSS dans un seul projet?

Oui, vous pouvez mélanger différentes unités de longueur CSS dans un seul projet. Cependant, il est important de comprendre comment ces unités fonctionnent et comment elles interagissent pour assurer la cohérence et la réactivité de la conception. Par exemple, vous pouvez utiliser "PX" pour la largeur de bordure, "EM" pour la taille de la police et "VW" pour la largeur de mise en page afin de créer des conceptions qui s'étalaient bien sur différentes tailles d'écran.

Quels sont les avantages de l'utilisation des unités relatives CSS?

Les unités relatives en CSS offrent certains avantages, en particulier dans les conceptions réactives. Ils permettent à la taille des éléments de s'étendre les uns par rapport aux autres, la taille de la fenêtre ou la taille de la police par défaut de l'utilisateur. Cela rend votre conception plus flexible et capable de s'adapter à différentes tailles d'écran et préférences utilisateur.

Comment convertir entre différentes unités de longueur CSS?

La conversion entre les différentes unités de longueur CSS peut être compliquée car elle dépend de divers facteurs tels que la taille actuelle de la police, la taille de la fenêtre et la densité de pixels de l'écran. Cependant, certains outils et calculatrices en ligne peuvent vous aider avec ces conversions.

Quelle est la taille de la police par défaut dans CSS?

La taille de la police par défaut dans la plupart des navigateurs est 16px. Cela signifie que 1EM ou 1REM est égal à 16px par défaut. Cependant, les utilisateurs peuvent modifier cette taille de police par défaut dans leurs paramètres de navigateur, c'est pourquoi les unités relatives sont généralement recommandées comme taille de police.

Comment la densité des pixels affecte-t-elle les unités de longueur CSS?

La densité de pixels fait référence au nombre de pixels dans une zone physique d'écran donnée, généralement mesurée en pixels par pouce (PPI). Les écrans avec une densité de pixels plus élevée montrent plus de détails dans le même espace physique. Dans CSS, un pixel (PX) n'est pas un pixel physique sur l'écran, mais un pixel de référence, qui est une unité physique de mesure qui prend en compte la densité de pixels de l'écran. Cela signifie que la longueur 1px dans le CSS peut correspondre à plusieurs pixels physiques sur un écran haute densité.

Quelle est l'unité "CH" dans CSS?

L'unité "CH" dans CSS est une unité relative qui représente la largeur du caractère "0" (zéro) dans la police actuelle. Il est utile pour définir des largeurs ou des marges qui doivent être alignées sur un nombre spécifique de caractères, quelle que soit la taille réelle de la police.

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!