Quelle est l'unité de mesure CSS ?

Les unités de mesure CSS sont utilisées pour spécifier la taille, l'espacement, les bordures et d'autres attributs des éléments, et peuvent être divisées en unités absolues et unités relatives. Les unités absolues incluent les pixels, les pouces, les centimètres, les millimètres et les points. Les unités relatives incluent le pourcentage, la largeur de la fenêtre, la hauteur de la fenêtre, la largeur minimale de la fenêtre, la largeur maximale de la fenêtre et les unités relatives de la police. Choisir la bonne unité de mesure peut rendre la page adaptable et réactive, tout en tenant compte des caractéristiques et de la compatibilité des différentes unités.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

Il existe de nombreuses unités de mesure en CSS, qui sont utilisées pour spécifier la taille, l'espacement, la bordure et d'autres attributs des éléments. Ces unités de mesure peuvent être divisées en deux catégories : les unités absolues et les unités relatives.

1. Unité absolue :

- Pixel (Pixel, px) : Le pixel est l'unité absolue la plus couramment utilisée, qui représente un point sur l'écran. Les pixels sont fixes et ne changent pas en fonction de la taille de l'écran. Par exemple, width : 200px ; signifie que la largeur de l'élément est de 200 pixels.

- Pouce (po) : Le pouce est une unité physique, indiquant que 1 pouce est égal à 2,54 centimètres. Par exemple, width : 2 in ; signifie que l’élément mesure 2 pouces de large.

- Centimètre (cm) : Le centimètre est une unité physique, indiquant que 1 centimètre est égal à 0,3937 pouces. Par exemple, largeur : 5 cm ; signifie que la largeur de l'élément est de 5 cm.

- Millimètre (mm) : Le millimètre est une unité physique, indiquant que 1 millimètre est égal à 0,03937 pouces. Par exemple, largeur : 50 mm signifie que la largeur de l'élément est de 50 mm.

- Point (Point, pt) : Le point est une unité physique, indiquant que 1 point est égal à 1/72 de pouce. Par exemple, font-size : 12pt ; signifie que la taille de la police est de 12 points.

2. Unité relative :

- Pourcentage (%) : Le pourcentage est une unité de mesure relative à l'élément parent. Par exemple, width : 50 % ; signifie que la largeur de l’élément est égale à 50 % de la largeur de l’élément parent.

- Largeur de la fenêtre (vw) : la largeur de la fenêtre est une unité de mesure relative à la largeur de la fenêtre du navigateur. Par exemple, width: 50vw; signifie que la largeur de l'élément correspond à 50 % de la largeur de la fenêtre du navigateur.

- Hauteur de la fenêtre (vh) : La hauteur de la fenêtre est une unité de mesure relative à la hauteur de la fenêtre du navigateur. Par exemple, height: 50vh; signifie que la hauteur de l'élément est égale à 50 % de la hauteur de la fenêtre du navigateur.

- Largeur minimale de la fenêtre d'affichage (vmin) : la largeur minimale de la fenêtre d'affichage est une unité de mesure relative à la plus petite de la largeur et de la hauteur de la fenêtre du navigateur. Par exemple, width: 50vmin; signifie que la largeur de l'élément est égale à 50 % de la plus petite largeur et hauteur de la fenêtre du navigateur.

- Largeur maximale de la fenêtre d'affichage (vmax) : la largeur maximale de la fenêtre d'affichage est une unité de mesure par rapport à la plus grande largeur et hauteur de la fenêtre du navigateur. Par exemple, width: 50vmax; signifie que la largeur de l'élément est égale à 50 % de la plus grande largeur et hauteur de la fenêtre du navigateur.

- Unités relatives de police : y compris les unités relatives telles que em, rem et ch, utilisées pour spécifier les mesures liées à la police. em est la taille de la police par rapport à l'élément parent, rem est la taille de la police par rapport à l'élément racine (c'est-à-dire l'élément html) et ch est la largeur par rapport à 0 caractère.

Choisir l'unité de mesure appropriée peut rendre la page cohérente sur différents appareils et être réactive. Lors du choix d'une unité de mesure, des facteurs tels que la taille, la disposition et l'espace disponible des éléments doivent être pris en compte en fonction des besoins réels et des exigences de conception. Dans le même temps, vous devez également prêter attention aux caractéristiques et à la compatibilité des différentes unités de mesure pour garantir la cohérence et la fiabilité des styles sur les différents navigateurs et appareils.

Pour résumer, CSS fournit une variété d'unités de mesure, y compris des unités absolues (pixels, pouces, centimètres, millimètres, points) et des unités relatives (pourcentage, largeur de fenêtre, hauteur de fenêtre, largeur minimale de fenêtre, largeur maximale de fenêtre, unités relatives de police). ). Choisir la bonne unité de mesure peut rendre la page adaptable et réactive, tout en tenant compte des caractéristiques et de la compatibilité des différentes unités.

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!