Heim > Artikel > Web-Frontend > Welche neuen Einheiten werden in CSS3 hinzugefügt?
Welche neuen Einheiten werden in CSS3 hinzugefügt?
- 青灯夜游Original
- 2022-01-12 17:17:072064Durchsuche
Neue Einheiten in CSS3 hinzugefügt: 1. „ch“, die Breite des Zeichens 0; 2. „rem“, eine relative Einheit, hauptsächlich relativ zur Größe der Schriftart des Stammelements 3. „vw“, die Breite von das Fenster; 4. „vh“, Fensterhöhe; 5. „vmin“ 6. „vmax“;
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Die neuen Längeneinheiten in CSS3
Die neuen Längeneinheiten in CSS3 lauten wie folgt:
ch, die Breite des Zeichens 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 ist eine relative Einheit, hauptsächlich relativ zur Schriftgröße des Stammelements. Um rem zu verwenden, müssen wir uns auf das angegebene Stammelement beziehen.
vw, Ansichtspunktbreite, Fensterbreite, 1vw=1 % der Fensterbreite🎜🎜🎜vh, Ansichtspunkthöhe, Fenster Höhe, 1vh=1% der Fensterhöhe🎜🎜🎜vmin, vmax usw.🎜🎜Neuer Standpunkt- Verwandte Einheiten. Im Allgemeinen auf mobile Geräte ausgerichtet. 🎜🎜rem ist eigentlich dasselbe wie em, außer dass rem eine zusätzliche Einschränkung hat, die die Schriftart des Stammelements (HTML-Elements) darstellt -Größe. Wir können uns den Unterschied zwischen 🎜🎜rem und em anhand des folgenden Beispiels ansehen: 🎜rrreee🎜Zu diesem Zeitpunkt ist die Schriftgröße von 🎜🎜🎜🎜div2 : 16px*1.2em=19.2px🎜🎜🎜div3 Schriftgröße: 12px*1.2rem=14.4px🎜🎜🎜div4 Schriftart -size -size: 12px*1.2rem*1.2em=17.28px🎜🎜Es ist ersichtlich, dass rem keine Kaskadierung hat Beziehung und emEs gibt eine kaskadierende Beziehung. 🎜🎜Es ist erwähnenswert, dass IE8 und niedriger, Safari 4, IOS 3.2 usw. die Einheit rem nicht unterstützen. 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜Das obige ist der detaillierte Inhalt vonWelche neuen Einheiten werden in CSS3 hinzugefügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!