Comment utiliser la nouvelle unité de longueur en CSS3

Utilisation : 1. em représente la taille de la police par rapport au texte dans l'objet actuel ; 2. rem représente la taille de la police par rapport à l'élément racine ; 3. ch représente la taille du chiffre 0 ; de la fenêtre de pourcentage ; 5. vw représente la largeur de la fenêtre d'affichage en pourcentage ; 6. ex représente la hauteur de la lettre x minuscule de la police actuelle ou 1/2 de 1em ;

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment utiliser les nouvelles unités de longueur en CSS3 ?

Les nouvelles unités de longueur en CSS3 sont :

• em : la taille de la police par rapport au texte dans l'objet actuel. Taille de police relative au nœud parent

• rem : Taille de police relative à l'élément racine . Scénario d'application : La mise en page est déterminée par le contenu du texte.

• vh et vv : 1vh est égal à 1/100 de la hauteur de la fenêtre ①, et 1vw est égal à 1/100 de la largeur de la fenêtre.

• vmin et vmax : Concernant la valeur minimale ou maximale de la hauteur et de la largeur de la fenêtre, vmin est égal à la valeur minimale de 1/100 de la largeur et de la hauteur de la fenêtre. Scénario d'application : Rendre un élément toujours visible à l'écran.

• ch : la largeur du chiffre 0

• ex : la hauteur de la minuscule x lettre de la police actuelle ou 1/2 de 1em②. Scénario d'application : exposant et indice

ch -- largeur du caractère 0 (zéro)

rem -- taille de la police de l'élément racine (élément html) Que signifie

 ?

Par exemple, si la taille de police de l'élément racine html est de 100 px, alors les paramètres rem des éléments situés sous l'élément racine sont tous 1rem = 100 px.

La valeur initiale de rem est de 16px, ce qui signifie que lorsque la taille de police du nœud racine n'est pas définie, 1rem = 16px

N'oubliez pas qu'elle est relative à l'élément racine html. Si vous définissez le corps, ce sera le cas. ne fonctionne pas

Rappelez-vous : vw et vh sont uniquement relatifs à la zone visible du navigateur, c'est-à-dire window.innerHeight, window.innerWidth

vw -- la zone visible du navigateur, 1vw est égal à 1% de la largeur de la zone visible du navigateur. zone visible

vh -- la zone visuelle du navigateur, 1vh est égal à 1% de la hauteur de la zone visible du navigateur

vmin -- la plus petite de vw et vh

vmax -- la plus grande de vw et vh

tels que les paramètres de largeur/hauteur du navigateur Pour 1000px/600px

Ensuite,

2vmin = 600*2/100 = 12px
2vmax = 1000*2/100 = 20px

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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!