Detaillierte Erläuterung der Unterschiede und Verwendungen von (px em rem) in CSS

Ich bin kürzlich auf die Einstellung der Schriftgröße gestoßen, als ich Schriftarten gelernt habe. Die Einheit kann px, em oder rem sein es benutzen? Px ist die grundlegende Abtasteinheit von Pixelbildern. Sie ist nur relativ zur Bildschirmauflösung des Monitors. Wenn Sie in ein Bild hineinzoomen, sehen Sie kleine Quadrate Raster ist ein Pixel. Die Standardschriftgröße des Browsers beträgt 16 Pixel. Die Eigenschaften von px sind: Die Groß-/Kleinschreibung der Schriftart ist festgelegt und stellt einen festen Wert dar. Ältere Versionen von IE können Schriftarten nicht skalieren, aber jetzt müssen Sie sich im Grunde keine Gedanken mehr über niedrigere Versionen von IE machen. Daher wird im Allgemeinen diese Einheit verwendet, die genau genug ist. em ist eine relative Einheit, die die Größe der Schriftart im Verhältnis zu ihrem übergeordneten Element darstellt. Dies kann eine Dezimalzahl oder eine

Ganzzahl

sein. Wenn die Schriftgröße des übergeordneten Elements beispielsweise 16 Pixel beträgt, ist 1em 16 Pixel und 2em 32 Pixel. Das Merkmal von
em ist, dass es sich nicht um einen festen Wert handelt, sondern dass sich sein Wert mit der Größe der übergeordneten Schriftart ändert. Verwendungsszenario: Wenn die inneren
Ränder des aktuellen Elements proportional zur aktuellen Schriftgröße sein müssen, können Sie em verwenden. rem ist auch eine relative Einheit. Der Unterschied zu em besteht darin, dass es relativ zum Stammelement ist, was die Berechnung viel einfacher und bequemer macht als em, da sein Referenzwert die Größe des Unterbilds des Stammelements ist Der Standardwert ist 16px. Das Merkmal von
rem ist, dass es relativ zur Schriftgröße des Stammelements leicht zu berechnen ist. Sie können die Schriftgröße der gesamten Seite ändern, indem Sie die HTML-Root-Schriftgröße steuern, bei der es sich um die mobile Anpassung der Seitengröße handelt. Einfache Studiennotizen, um zukünftige
Überprüfungen zu erleichtern
Wenn es Fehler oder Mängel gibt, hoffe ich, dass Sie mir einen Rat geben können.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Unterschiede und Verwendungen von (px em rem) in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!