Der Unterschied zwischen px, em und rem

Sie werden alle verwendet, um die Größe der Schriftart sowie die Breite und Höhe des Felds festzulegen, aber px ändert sich aufgrund von Änderungen in der Browsergröße nicht, während sich em und rem aufgrund von Änderungen ändern in der Browsergröße.

Beim Schreiben von Code verwenden wir häufig Größeneinheiten, wenn wir die Größe von Schriftarten oder die Breiten- und Höhenwerte von Elementen in CSS definieren Im Detail haben die gängigen Einheiten in CSS und ihre Verwendung einen gewissen Referenzwert.

[Empfohlene Kurse: CSS-Tutorial]

px

px ist die Abkürzung für Pixel, was Pixel bedeutet. Es wird zur Angabe der Schriftgröße sowie der Breite und Höhe des Elements verwendet. Pixel sind relativ zur Bildschirmauflösung des Monitors

Beispiel: Stellen Sie die Breite auf 200 Pixel und die Höhe auf 200 Pixel für ein div-Element ein

div{
width:200px;
height:200px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
font-size: 16px;

		}

Das Rendering ist wie folgt:

em

em ist eine relative Längeneinheit, die relativ zur Schriftgröße des Textes im aktuellen Objekt ist. Wenn wir die Schriftgröße des aktuellen Textes nicht festgelegt haben, ist em relativ zur Standardschriftgröße des Browsers

Die Standardschriftgröße im Browser beträgt im Allgemeinen 16px Wenn wir Em-Einheiten schreiben, werden sie oft im adaptiven Layout verwendet. Vereinfachen Sie den Code, indem Sie den Wert für die Schriftgröße im Body-Selektor in CSS so festlegen, dass alle Ems auf der Seite relativ zum Body-Wert sind.

Beispiel: Stellen Sie die Breite auf 100 Pixel und die Höhe auf 100 Pixel für das div-Element ein, indem Sie die Größeneinheit in em ändern

1em=16px, also 100px=6,25em

<style>
div{
width:6.25em;
height:6.25em;
border: 0.0625em solid #ccc;
text-align: center;
line-height: 6.25em;
}
</style>

Effekt Bild:

Wir können einen Wert auch direkt auf den Körper festlegen, sodass sein Wert direkt relativ zum Körper ist, und dann den ursprünglichen px-Wert durch 10 dividieren. Der Wert von em

body{
font-size: 62.5%
	}
div{
width:10em;
height:10em;
border:0.1em solid #ccc;
}
</style>

Rendering:

Wie aus der obigen Abbildung ersichtlich ist, ist der Wert von em nicht festgelegt und relativ zu seinem übergeordneten Element Level-Elementgröße

rem:

rem ist eine neue relative Einheit in CSS3. Der Unterschied zwischen it und em besteht darin, dass bei Verwendung von rem die Schriftgröße für an Element, immer noch eine relative Größe, aber nur relativ zum HTML-Stammelement. Die Verwendung ist sehr einfach. Sie können den Wert ändern, indem Sie die Größe des Root-Elements ändern >

body{
		font-size:10px;
	}
		div{
			width:15rem;
			height:15rem;
			border:0.01rem solid pink;
			text-align: center;
			line-height: 15rem;
			font-size: 2rem;
		}

Rendering:

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für alle hilfreich sein.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen px, em und rem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!