Ausführliche Erklärung des Unterschieds und der Verwendung von px em rem in CSS

In diesem Artikel werden hauptsächlich der Unterschied und die Verwendung von px em rem in CSS vorgestellt. Hat einen sehr guten Referenzwert. Schauen wir es uns mit dem Editor unten an

Ich bin kürzlich auf die Einstellung der Schriftgröße gestoßen, als ich Schriftarten gelernt habe. Schriftart-Größeneinheit kann px sein oder em oder rem, was sind die Unterschiede zwischen diesen Einheiten und wie werden sie verwendet?

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 quadratische Raster ., ein quadratisches Gitter ist ein Pixel. Die Standardschriftgröße des Browsers beträgt 16 Pixel. Die Eigenschaften von

px sind: Die Schriftart ist festgelegt und ein fester Wert. Ältere Versionen von IE können Schriftarten nicht skalieren, aber jetzt müssen Sie sich im Grunde keine Gedanken mehr über niedrigere Versionen machen von IE. 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. Die Eigenschaften von

em sind: ist kein fester Wert, sein Wert ändert sich mit der Größe der übergeordneten Schriftart. 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 Wurzelelement ist, was die Berechnung viel einfacher und bequemer macht als em, da sein Referenzwert die Größe des Wurzelelement-Untergraphen ist . , der Browser-Standard ist 16px. Die Eigenschaften von

rem sind: relativ zur Schriftgröße des Stammelements, leicht zu berechnen. 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.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des Unterschieds und der Verwendung von px em rem in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!