Maison >interface Web >Questions et réponses frontales >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.
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 100db36a723c770d327fc0aef2ce13b1. 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!