Unités CSS – %, em, rem, px, vh, vw

Dans les feuilles de style CSS ou en cascade, il existe de nombreuses unités qui peuvent représenter les valeurs de différentes propriétés de différentes manières en fonction de vos besoins. Les propriétés CSS telles que : font-size, height, width et line-height sont utilisées pour définir différentes propriétés du conteneur. Les valeurs de ces propriétés peuvent être attribuées dans différentes unités.

Dans cet article, nous examinerons de plus près les différentes unités CSS et les implémenterons de manière pratique pour comprendre l'utilisation de chaque unité.

Il existe de nombreuses unités CSS disponibles en CSS mais dans cet article, nous apprenons ou discutons uniquement des propriétés suivantes -

• Pixel (px) - L'unité pixel ou px est la plus petite et principalement utilisée par les débutants pour définir la valeur de différentes propriétés de longueur. Mathématiquement, 1px est défini comme 1/96 de pouce, c'est-à-dire 1px = 1/96 de pouce.

Grammaire

La syntaxe suivante vous montrera comment utiliser les unités de pixels pour définir la valeur de différents attributs de longueur -

property_name: numeric_value px; 

• em - L'attribut em est utilisé pour définir la valeur de l'attribut length par rapport à la taille de la police de l'élément. Si nous les comparons aux pixels, nous voyons que 1em est identique à 16px, c'est-à-dire 1em = 16px.

Grammaire

La syntaxe suivante vous montrera comment utiliser les unités de pixels pour définir la valeur de différents attributs de longueur -

property_name: numeric_value em;

• rem - L'attribut rem définit la valeur de l'attribut par rapport à la taille de la police de l'élément racine en HTML (c'est-à-dire la balise ). Si nous comparons les rem aux pixels, nous constatons que 1rem est également identique à 16px, c'est-à-dire 1rem = 16px.

Grammaire

La syntaxe suivante vous montrera comment définir la valeur de différents attributs de longueur en utilisant les unités de pixels -

property_name: numeric_value rem;

REMARQUE - Il est recommandé de ne pas utiliser les pixels, em et rem comme unités lors du développement de pages Web ou d'applications. Parce que cela ne permettra pas aux conteneurs HTML de modifier dynamiquement leur largeur et leur hauteur en fonction de la taille de la fenêtre d'affichage tout en rendant la page Web réactive.

• Viewport-width (vw) - L'attribut viewport-width ou vw est utilisé pour définir une valeur basée sur la largeur actuelle de la fenêtre d'affichage de l'utilisateur qui consulte la page Web. Cela permettra au conteneur de modifier dynamiquement sa largeur en fonction de la largeur actuelle de la fenêtre d'affichage de la page Web.

Grammaire

La syntaxe suivante vous montrera comment utiliser les unités de pixels pour définir la valeur de différents attributs de longueur -

property_name: numeric_value vw;

• Viewport-height (vh) - La hauteur de la fenêtre d'affichage ou vh est presque similaire à la propriété de largeur de la fenêtre d'affichage. vw est utilisé pour définir la largeur dynamique de l'élément et vh est utilisé pour définir la hauteur dynamique de l'élément. Chaque fois que l'utilisateur modifie la hauteur, il définit dynamiquement la hauteur de l'élément par rapport à la hauteur actuelle de la fenêtre.

Grammaire

La syntaxe suivante vous montrera comment définir la valeur de différents attributs de longueur en utilisant les unités de pixels -

property_name: numeric_value vh;

• Pourcentage (%) - L'attribut pourcentage ou % définit également une valeur dynamique à l'attribut que nous voulons attribuer à l'élément dans le document HTML. Au lieu d'utiliser des signes % différents pour chaque propriété comme vw et vh, nous pouvons utiliser le même signe % pour chaque propriété afin de lui attribuer une valeur.

Grammaire

La syntaxe suivante vous montrera comment définir la valeur de différents attributs de longueur en utilisant les unités de pixels -

property_name: numeric_value %;

Maintenant, discutons de chacun d'eux et comprenons leurs différences en les implémentant réellement à l'aide d'exemples de code.

Étapes

• Étape 1 - Dans la première étape, nous définirons différents éléments HTML pour définir différentes propriétés de longueur en utilisant différentes unités CSS.

• Étape 2 - Dans l'étape suivante, nous définirons les styles des éléments définis à l'étape précédente à l'intérieur des éléments < 内定义的 . /head> balise.

• Étape 3 - Dans la dernière étape, nous utiliserons différentes unités CSS pour attribuer des valeurs aux propriétés et voir les différences entre elles.

Exemple

Les exemples ci-dessous vous aideront à comprendre les différences entre toutes les unités CSS et à les comprendre réellement -

<html>
<head>
   <style>
      .div1 {
         margin-top: 5%;
         width: 50%;
         height: 20%;
         background-color: aqua;
      }
      .div2 {
         margin-top: 5vh;
         width: 50vw;
         height: 20vh;
         background-color: aqua;
      }
      .para1 {
         font-size: 16px;
      }
      .para2 {
         font-size: 1.2em;
      }
      .para3 {
         font-size: 1.3rem;
      }
   </style>
</head>
<body>
   <h2>CSS units – %, em, rem, px, vh, vw</h2>
   <div class = "div1"> width: 50% <br> height: 20% </div>
   <div class = "div2"> width: 50vw <br> height: 20vh </div>
   <p class = "para1"> Paragraph with font-size: 16px </p>
   <p class = "para2"> Paragraph with font-size: 1.2em or 19.2px </p>
   <p class = "para3"> Paragraph with font-size: 1.3rem or 20.8px </p>
</body>
</html>

Dans l'exemple ci-dessus, nous avons utilisé différentes unités CSS pour spécifier la hauteur, la largeur et la taille de la police de l'élément.

Conclusion

Dans cet article, nous avons découvert les différentes unités CSS qui peuvent être utilisées pour définir la valeur de la propriété length en CSS. Nous les discutons en détail en les implémentant pratiquement à l'aide d'exemples de code.

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!