Quelles nouvelles unités sont ajoutées dans CSS3-Questions et réponses frontales-php.cn

Quelles nouvelles unités sont ajoutées dans CSS3

青灯夜游

Libérer： 2022-01-12 17:17:07

original

2140 Les gens l'ont consulté

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.

Quelles nouvelles unités sont ajoutées dans CSS3

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>

Copier après la connexion

此时，

div2的font-size: 16px*1.2em=19.2px
div3的font-size: 12px*1.2rem=14.4px
div4的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!