Quelles sont les unités relatives en CSS

Les unités relatives en CSS incluent le pourcentage, l'unité de fenêtre, l'unité relative de police et l'unité de longueur relative, etc. Introduction détaillée : 1. Le pourcentage est une unité de mesure relative à l'élément parent. En CSS, vous pouvez utiliser le pourcentage pour spécifier la taille, la marge, le remplissage et d'autres attributs de l'élément. L'unité de pourcentage est très couramment utilisée et peut être ajustée. de manière adaptative en fonction de la taille de l'élément parent.La taille de l'élément ;2. L'unité de fenêtre est une unité de mesure par rapport à la fenêtre du navigateur, et l'unité de fenêtre peut ajuster la taille de l'élément en fonction de la taille du navigateur. fenêtre ; 3. L'unité relative de la police est une unité relative à la taille de la police, etc.

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

En CSS, les unités relatives sont des unités relatives à d'autres dimensions ou à l'environnement, et leurs valeurs changent en fonction du contexte. Les unités relatives permettent une mise en page réactive et s'adaptent à différentes tailles d'écran. Les unités relatives suivantes sont courantes en CSS :

1. 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. L'unité de pourcentage est très couramment utilisée pour redimensionner de manière adaptative un élément en fonction de la taille de son élément parent.

2. 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. Les unités de largeur de fenêtre sont idéales pour créer des mises en page réactives qui ajustent automatiquement la largeur des éléments en fonction de la taille 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. Les unités de hauteur de fenêtre sont également couramment utilisées pour créer des mises en page réactives qui ajustent automatiquement la hauteur des éléments en fonction de la taille 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. L'unité de largeur minimale de la fenêtre d'affichage garantit que les éléments conservent des proportions appropriées sur différentes tailles d'écran.

- Largeur maximale de la fenêtre d'affichage (vmax) : l'unité de largeur maximale de la fenêtre d'affichage représente un 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. L'unité de largeur maximale de la fenêtre d'affichage garantit que les éléments conservent des proportions appropriées sur différentes tailles d'écran.

3. 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. L'unité em peut être utilisée pour spécifier la taille, l'espacement, les bordures et d'autres attributs des éléments.

- 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. Les unités rem peuvent être utilisées pour implémenter des tailles de police réactives sur la page.

4. 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.

Ces unités relatives peuvent changer en fonction des changements de contexte, rendant la page adaptable et réactive sur différents appareils et tailles d'écran. L'utilisation d'unités relatives peut aider à obtenir des mises en page flexibles et des conceptions adaptatives.

Pour résumer, les unités relatives courantes en CSS incluent les pourcentages, les unités de fenêtre (vw, vh, vmin, vmax), les unités relatives de police (em, rem) et les unités de longueur relative (rem, em). Ces unités peuvent changer en fonction du contexte, permettant de mettre en œuvre des mises en page réactives et de s'adapter aux différentes tailles d'écran. Lors de la sélection des unités, vous devez décider quelles unités relatives utiliser en fonction de vos exigences et besoins spécifiques en matière de conception.

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!