Quelles sont les classifications des unités CSS ?

La classification des unités CSS comprend les unités absolues et les unités relatives. Introduction détaillée : 1. Les unités absolues sont des unités liées aux dimensions physiques, et leurs valeurs restent fixes dans différents appareils et environnements, y compris les pixels, les pouces, les centimètres, les millimètres et les points 2. Les unités relatives sont des unités relatives à d'autres tailles ou ; environnements. , sa valeur changera en fonction du contexte. Les unités relatives peuvent implémenter une mise en page réactive et s'adapter aux besoins de différentes tailles d'écran, y compris les pourcentages, les unités de fenêtre, les unités relatives de police et les unités de longueur relative. Choisir la bonne unité permet un contrôle précis et une adaptabilité à différentes tailles d’écran.

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

Les unités en CSS peuvent être classées en fonction de leurs caractéristiques et de leurs utilisations. Selon les méthodes de classification courantes, les unités CSS peuvent être divisées dans les catégories suivantes :

1. Unités absolues : les unités absolues sont des unités liées aux dimensions physiques, et leurs valeurs restent fixes sur différents appareils et environnements. Les unités absolues courantes sont :

- Pixel (Pixel, px) : Le pixel est l'unité absolue la plus couramment utilisée et représente un point sur l'écran. Les pixels sont fixes et ne changent pas en fonction de la taille de l'écran. En CSS, les pixels sont souvent utilisés pour spécifier des attributs tels que la taille, l'espacement et les bordures des éléments.

- Pouce (po) : Le pouce est une unité physique, indiquant que 1 pouce est égal à 2,54 centimètres. En CSS, vous pouvez spécifier la taille d'un élément en utilisant les pouces comme unité de taille.

- Centimètre (cm) : Le centimètre est une unité physique, indiquant que 1 centimètre est égal à 0,3937 pouces. En CSS, vous pouvez spécifier la taille d'un élément en utilisant les centimètres comme unité de taille.

- Millimètre (mm) : Le millimètre est une unité physique, indiquant que 1 millimètre est égal à 0,03937 pouces. En CSS, vous pouvez spécifier la taille d'un élément en utilisant les millimètres comme unité de taille.

- Point (Point, pt) : Le point est une unité physique, indiquant que 1 point est égal à 1/72 de pouce. En CSS, vous pouvez spécifier la taille d'un élément en utilisant des points comme unité de taille.

2. Unités relatives : Les unités relatives sont des unités relatives à d'autres dimensions ou environnements, et leurs valeurs changeront en fonction des changements de contexte. Les unités relatives permettent une mise en page réactive et s'adaptent à différentes tailles d'écran. Les unités relatives courantes sont :

- Pourcentage (%) : Le pourcentage est une unité de mesure relative à l'élément parent. En CSS, vous pouvez utiliser des pourcentages pour spécifier la taille, les marges, le remplissage et d'autres propriétés des éléments. Par exemple, width : 50 % ; signifie que la largeur de l’élément est égale à 50 % de la largeur de l’élément parent.

- Unités de fenêtre : les unités de fenêtre sont des unités de mesure relatives à la fenêtre d'affichage du navigateur. Les unités de fenêtre redimensionnent les éléments en fonction de la taille de la fenêtre du navigateur. Les unités de fenêtre courantes sont :

- Largeur de la fenêtre (vw) : L'unité de largeur de la fenêtre représente un pourcentage par rapport à 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.

- Viewport Height (vh) : L'unité de hauteur de la fenêtre représente un pourcentage par rapport à 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) : L'unité de largeur minimale de la fenêtre d'affichage représente le pourcentage par rapport à 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) : l'unité de largeur maximale de la fenêtre d'affichage représente le pourcentage 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 : les unités relatives de police sont des unités relatives à la taille de la police. Les unités relatives de police courantes sont :

- em : L'unité em est un multiple de la taille de la police par rapport à l'élément. Par exemple, font-size: 1.2em; signifie que la taille de la police est 1,2 fois la taille de la police de l'élément parent.

- rem : L'unité rem est un multiple de la taille de la police par rapport à l'élément racine (c'est-à-dire l'élément html). Par exemple, font-size: 1.5rem; signifie que la taille de la police est 1,5 fois la taille de la police de l'élément racine.

- ch : L'unité ch est un multiple de la largeur du caractère "0". Par exemple, width: 10ch; signifie que la largeur de l'élément est 10 fois la largeur du caractère « 0 ».

- Unités de longueur relative : les unités de longueur relative sont des unités relatives à une certaine valeur d'attribut de l'élément lui-même. Les unités de longueur relative courantes sont :

- rem : L'unité rem est un multiple de la taille de la police par rapport à l'élément racine (c'est-à-dire l'élément html). En CSS, vous pouvez utiliser les unités rem pour spécifier la taille, l'espacement, les bordures et d'autres attributs des éléments. L'unité rem est souvent utilisée pour implémenter les dimensions relatives de la page entière.

-em : L'unité em est un multiple de la taille de la police par rapport à l'élément. En CSS, vous pouvez utiliser les unités em pour spécifier la taille, l'espacement, les bordures et d'autres attributs des éléments. L'unité em peut ajuster la taille d'un élément en fonction de sa propre taille de police.

La sélection de ces unités dépend des besoins spécifiques et des exigences de conception. Les unités absolues conviennent aux situations où un contrôle précis de la taille est requis, tandis que les unités relatives conviennent aux situations où une mise en page réactive et une adaptabilité à différentes tailles d'écran sont requises. Lors du choix des unités, vous devez prendre en compte les différences entre les différents appareils et écrans pour garantir que la page est cohérente et adaptable sur différents appareils.

Pour résumer, les unités CSS peuvent être classées en fonction de leurs caractéristiques et de leurs utilisations, y compris les unités absolues (pixels, pouces, centimètres, millimètres, points) et les unités relatives (pourcentage, unités de fenêtre, unités relatives de police). Les unités relatives peuvent également être subdivisées en unités de longueur relative. Choisir la bonne unité permet un contrôle précis et une adaptabilité à différentes tailles d’écran.

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!