Unterschiede bei der Verwendung von mittelschweren CSS3-Einheiten

Dieses Mal werde ich Ihnen die Unterschiede bei der Verwendung von CSS3-Mittelgewichtseinheiten vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von CSS3-Mittelgewichtseinheiten?

px: absolute Einheit, die Seite wird in genauen Pixeln angezeigt

em: relative Einheit, der Bezugspunkt ist die Schriftgröße des übergeordneten Knotens, wenn Sie font-size definieren Drücken Sie „Berechnen Sie es selbst“ (die Standardschriftart des Browsers ist 16 Pixel). 1em ist kein fester Wert auf der gesamten Seite.

rem: Relative Einheit, die als „root em“ verstanden werden kann. Sie wird relativ zur Schriftgröße des Root-Knotens berechnet. CSS3 hat ein neues Attribut und wird von Chrome/Firefox/IE9+ unterstützt.

(Beachten Sie außerdem, dass Chrome die Mindestschriftgröße auf 12 erzwingt. Auch wenn diese auf 10 Pixel eingestellt ist, wird sie letztendlich als 12 Pixel angezeigt. Wenn die Schriftgröße der HTML ist auf 10 Pixel eingestellt, die Berechnung des untergeordneten Knotens basiert immer noch auf 12 Pixel. Als Maßstab wurde in vielen Artikeln im Internet erwähnt, dass es nicht so ratsam ist, die Schriftgröße von HTML auf 10 zu setzen.

Rem-Anwendung auf mobilen Endgeräten kann auf die Taobao-Seite verweisen http://m.taobao.com (HTML-Schriftgröße übergeben dynamisch Berechnungserfassung)

Seiten-Benchmark 320px (20px), Berechnung des HTML-Schriftgrößenwerts:

var ele=document.getElementsByTagName("html")[0],    
     size=document.body.clientWidth/320*20;    
ele.style.fontSize=size+"px"

Hinweis: Das Meta-Skalierungsverhältnis muss auf 1 eingestellt werden :1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw: Blickwinkelbreite, Fensterbreite, 1vw entspricht 1 % der Fensterbreite.

vh: Blickpunkthöhe, Fensterhöhe, 1vh entspricht 1 % der Fensterhöhe.

vmin: Der kleinere Wert von vw und vh.

vmax: Der größere von vw und vh.

vw, vh, vmin, vmax: teilweise Unterstützung für IE9+, Unterstützung für Chrome/Firefox/Safari/Opera, Unterstützung für iOS Safari 8+, Unterstützung für AndroidBrowser 4.4+, Unterstützung für Chrome für Android39

Andere Einheiten sind:

%: Prozentsatz

in: Zoll

cm: Zentimeter

mm: Millimeter

pt:point, etwa 1/72 Zoll

pc:pica, etwa 6pt, 1/6 Zoll

Beispiel: Nehmen Sie die x-Höhe der Schriftart des aktuellen Effekts in Wenn die x-Höhe nicht bestimmt werden kann, wird sie als 0,5em berechnet (nicht unterstützt von IE11 und niedriger, Firefox/Chrome/Safari/Opera/ios Safari/Android Browser 4.4+ usw. erfordern alle Attribute und Präfixe)

ch: Basierend auf dem „0“-Zeichen in der vom Knoten verwendeten Schriftart beträgt es 0,5em, wenn es nicht gefunden werden kann (unterstützt von ie10+, chrome31+, safair7.1+, opera26+, iOS Safari 7.1+, Android-Browser4.4+)

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der CSS3-Shadow-Box-Shadow-Funktion

Realisierung eines 3D-Fotoalbums Effekt

So verwenden Sie das Zoom-Attribut oder overflow:auto in CSS

2D-Simulation zur Realisierung einer Riesenrad-Rotationsanimation Spezialeffekte

Das obige ist der detaillierte Inhalt vonUnterschiede bei der Verwendung von mittelschweren CSS3-Einheiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!