Maison > Article > interface Web > Quelles nouvelles unités sont ajoutées dans CSS3
Quelles nouvelles unités sont ajoutées dans CSS3
- 青灯夜游original
- 2022-01-12 17:17:072094parcourir
Nouvelles unités ajoutées en CSS3 : 1. "ch", la largeur du caractère 0 ; 2. "rem", une unité relative, principalement relative à la taille de la police de l'élément racine 3. "vw", la largeur de la fenêtre ; 4. "vh", hauteur de la fenêtre ; 5. "vmin" 6. "vmax", etc.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Les nouvelles unités de longueur en CSS3
Les nouvelles unités de longueur en CSS3 sont les suivantes,
ch, la largeur du caractère 0ch，字符0的宽度rem，是一个相对单位，主要是相对于根元素字体的大小，使用rem,我们需要参考指定的根元素。vw，viewpoint width，视窗宽度，1vw=视窗宽度的1%vh，viewpoint height，视窗高度，1vh=视窗高度的1%vmin，vmax等
新增的viewpoint相关的单位一般是针对移动设备的。
rem其实跟em是一回事，只不过rem多了一个限制条件，它表示根元素（html元素）的font-size。
rem和em的区别，我们可以通过下面这个例子来看一看，
<html style="font-size: 12px;">
<body>
<div id="div1" style="font-size: 16px">
<div id="div2" style="font-size: 1.2em"></div>
<div id="div3" style="font-size: 1.2rem">
<div id="div4" style="font-size: 1.2em"></div>
</div>
</div>
</body>
</html>此时，
div2的font-size:
16px*1.2em=19.2pxdiv3的font-size:
12px*1.2rem=14.4pxdiv4的font-size:
12px*1.2rem*1.2em=17.28px
可见，rem不存在级联关系，而em存在级联关系。
值得注意的是，IE8及以下、Safari 4、IOS 3.2等不支持rem
rem est une unité relative, principalement relative à la taille de la police de l'élément racine. Pour utiliser rem, nous devons faire référence à l'élément racine spécifié.
vw, largeur du point de vue, largeur de la fenêtre, 1vw=1% de la largeur de la fenêtre🎜🎜🎜vh, hauteur du point de vue, fenêtre height , 1vh=1% de la hauteur de la fenêtre🎜🎜🎜vmin, vmax, etc.🎜🎜Nouveau point de vue- unités associées Généralement destinées aux appareils mobiles. 🎜🎜rem est en fait la même chose que em, sauf que rem a une restriction supplémentaire, qui représente la police de l'élément racine (élément html) -taille. Nous pouvons jeter un œil à la différence entre 🎜🎜rem et em à travers l'exemple suivant, 🎜rrreee🎜À l'heure actuelle, la taille de police de 🎜🎜🎜🎜div2 : 16px*1.2em=19.2px🎜🎜🎜div3 taille de police : 12px*1.2rem=14.4px🎜🎜🎜police div4 -size -size : 12px*1.2rem*1.2em=17.28px🎜🎜On peut voir que rem n'a pas de cascade relation, et emIl existe une relation en cascade. 🎜🎜Il convient de noter que IE8 et versions antérieures, Safari 4, IOS 3.2, etc. ne prennent pas en charge l'unité rem. 🎜🎜(Partage de vidéos 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!