Die Unterscheidung zwischen CSS-Schriftarteneinheiten und die Implementierung der Schriftartenreaktionsfähigkeit

Im Folgenden finden Sie eine detaillierte Erläuterung der Unterscheidung zwischen CSS-Schriftarteneinheiten und der Implementierung responsiver Schriftarten. Der Inhalt ist ziemlich gut. Ich möchte ihn jetzt mit Ihnen teilen und als Referenz geben.

Problemszenario:

Wie stellt man bei der Implementierung eines responsiven Layouts die Schriftgröße in verschiedenen Fenstergrößen ein? Lesbarkeit mobiler Geräte?

Was Sie wissen müssen:

1. Die Konvertierungsbeziehung zwischen px, em, pt
1em = 16px
1px = 1/16 em = 0,0625em

////Die folgenden werden weniger verwendet //////
1em = 12pt
1px = 3/4 pt = 0,75pt
1pt = 1/12 em 0,0833em
1pt = 4/3 px = 1,3333px

2 Die Standardschriftart jedes Browsers ist 16px. Die Standardgröße aller nicht angepassten Browser beträgt 1em=16px

3. Auch wenn sie auf 10px eingestellt ist, wird sie letztendlich als 12px angezeigt. Dies erklärt, warum sich die Schriftgröße in ie oder mozllia manchmal von der in Chrome unterscheidet

4 Was ist der Unterschied zwischen px, em, rem vw, vh, vmin?

px:

relative Einheit. Relativ zur Bildschirmauflösung. Deshalb ist die Schriftgröße umso kleiner, je höher die Auflösung ist. Was sind also die Vor- und Nachteile von px?

Vorteile: relativ stabil und genau.

Nachteile: Wenn die Seite skaliert wird, wird die Lesbarkeit des Textes beeinträchtigt. Dieses Problem kann durch die Verwendung von em als Schriftarteinheit gelöst werden.

em:

relative Einheit. Die Skalierung der Schriftgröße basierend auf dem Basiswert ist ein relativer Wert, kein spezifischer Wert. Der Basiswert hängt von der vom übergeordneten Element festgelegten Schriftgröße ab. Wenn das übergeordnete Element die Schriftgröße nicht festlegt, suchen Sie nach oben bis zum Wurzelknoten.

Vorteile: Gleicht die Mängel von px aus

Nachteile: Zu große Abhängigkeit von übergeordneten Knoten, anfällig für wiederholte Deklarationen der Schriftgröße.

rem:

Relative Einheit. Die Schriftgröße relativ zum Stammknoten-HTML.

Nachteile: vermeidet die Abhängigkeit von em von der Schriftgröße des übergeordneten Elements

Vorteile: Es gibt nur ein Referenzsystem, die Schriftgröße des Stammknotens

<SPAN style="FONT-SIZE: 16px">html{font-size:100%}    
//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1rem;} }    
@media (min-width:960px) { body {font-size:1.2rem;} }    
@media (min-width:1100px) { body {font-size:1.5rem;} }    
</SPAN>

5 Muss die Schriftgröße auf 62,5 % eingestellt werden?

Wie oben erwähnt, beträgt die Standardschriftgröße des Browsers 16 Pixel. Was ist, wenn Sie die Schriftgröße bei verschiedenen Seitengrößen auf 12, 14 und 18 Pixel einstellen möchten?

Müssen wir 12/16 rem, 14/16rem, 18/16rem verwenden, um die relative Größe von Schriftarten zu berechnen?

Ein einfacherer Weg ist die Verwendung des Wurzelknotensatzes Stellen Sie die Schriftgröße auf 10 Pixel ein, sodass sie direkt als 1.2rem, 1.4rem, 1.8rem in Medien geschrieben werden kann. Wenn der Stammknoten auf 10 Pixel eingestellt ist, beträgt die Schriftgröße im Verhältnis zur Standardschriftgröße des Browsers Schriftgröße:10/16 %, also Schriftgröße:62,5 %

<SPAN style="FONT-SIZE: 16px">html{font-size:10px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1m=1.2 rem;font-size:12px;  /某些浏览器不支持rem/} }    
@media (min-width:960px)  { body {font-size:1.4 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:1.8 rem; font-size:18px; /*同上*/} }    
</SPAN>

<SPAN style="FONT-SIZE: 16px">html{font-size:16px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:12/16 rem;font-size:12px;  /某些浏览器不支持rem，需要再次使用px 声明font-size/} }    
@media (min-width:960px)  { body {font-size:14/16 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:18/16 rem; font-size:18px; /*同上*/} }    
</SPAN>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für alle hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Code zum Erzwingen englischer Wortzeilenumbrüche mithilfe von CSS

CSS Die von div implementierte Maskenebene ist mit den Browsern IE6-IE9 und Firefox

Das obige ist der detaillierte Inhalt vonDie Unterscheidung zwischen CSS-Schriftarteneinheiten und die Implementierung der Schriftartenreaktionsfähigkeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!