Was ist in CSS der Unterschied zwischen em und px?


Antwort 1:

Am Ende sind es alle Pixel

Letztendlich weist der Webbrowser das Betriebssystem an, einen Bildschirmtreiber anzuweisen, etwas in Pixel auf einen Bildschirm zu bringen.

Dieses „Pixel“ ist jedoch ein physisches Pixel. Es ist das, was wir als "Gerätepixel" bezeichnen könnten.

Sie sprechen nicht von "Gerätepixeln". Sie sprechen von CSS-Pixeln.

CSS-Pixel! == Pixel

Ein „CSS-Pixel“ ist ungefähr so ​​ähnlich wie ein Gerätepixel. [1] Ein CSS-Pixel basiert auf der Idee eines „Referenzpixels“, bei dem es sich um den Sichtwinkel eines Geräts mit einer Pixeldichte von 96 dpi in einer Entfernung von etwa einem Arm handelt. [2] Durch die Kraft der Mathematik könnte das „Referenzpixel“ enden 1,3 mm auf einem Bildschirm. Es gibt jedoch eine Reihe von Gründen, die möglicherweise nicht der Fall sind.

Es ist wichtig, dass wir mit dem grundlegenden Punkt beginnen, dass px nicht „Pixel auf einem Bildschirm“ bedeutet.

In CSS gibt es verschiedene Maßeinheiten

Es gibt zwei Hauptkategorien Ihrer Maßeinheiten [3]:

  1. absolute Einheitenrelative Einheiten

Wenn es sich um eine „absolute Einheit“ handelt, hat diese Maßeinheit eine Beziehung zu etwas in der physischen Welt.

Wenn es sich um eine relative Einheit handelt, wird der Wert in eine absolute Einheit berechnet.

Also px vs em

px ist eine "absolute Einheit"; Die CSS-Engine weist den Browser an, diese „Länge“ für die Größenbestimmung zu verwenden. Der Browser und das Betriebssystem sortieren, wie diese Länge mit einem „Gerätepixel“ verglichen wird, und rendern sie. Px hat eine statische Beziehung zu dem „Referenzpixel“, über das wir zuvor gesprochen haben. px es wird sich nicht ändern.

em ist eine "relative Einheit". Die CSS-Engine berechnet diesen Wert zuerst in eine Pixellänge. Nachdem die Pixellänge berechnet wurde, wird der berechnete Wert an den Browser weitergeleitet. em wird insbesondere basierend auf der relativen Schriftgröße des enthaltenen Elements berechnet. Der Wert von em kann sich ändern; Wenn Sie die Schriftgröße eines übergeordneten Elements ändern, wirkt sich dies auf den Wert von em aus.

Der beste Weg, an sie zu denken, besteht darin, vorzutäuschen, dass das em-Bit nicht vorhanden ist, und den Wert als Multiplikator zu behandeln. z.B:

.foo {Schriftgröße: 1.5em; / * verwirrend * / Schriftgröße: 1,5; / * Nicht gültig, sollte aber vollständig anstelle des Aufrufs em * / line-height: 1.5; / * sehen, wie die Zeilenhöhe einen Multiplikator ohne Einheit akzeptiert? * /}

Der erste große Unterschied ist also, dass einer absolut und der andere relativ ist.

px und em in der Anwendung

Verschiedene Situationen werden die Stärken und Schwächen jeder Einheit hervorheben [4].

Da px eine absolute Maßeinheit ist, haben Sie eine hohe Vorhersagbarkeit für das, was Sie auf dem Bildschirm erhalten. Aber Sie haben keine Verhältnismäßigkeit; Eigenschaften in px-Größe werden nicht neu berechnet, wenn Sie eine Schriftgröße in einem übergeordneten Element anpassen.

Sie stoßen also häufig darauf:

body {Schriftgröße: 16px;} h1 {Schriftgröße: 32px; / * absolute Einheiten für Schriftgröße * / Auffüllen: 8px 16px; / * absolute Einheiten zum Auffüllen * /} .foo {Schriftgröße: 12px; / * Schriftgröße in einem übergeordneten Element anpassen * /} / * einen neuen Regelsatz schreiben, um die Proportionalität zu gewährleisten * / .foo h1 {Schriftgröße: 24px; / * eine Schriftregel umschreiben, um h1 2x normal zu machen * / padding: 6px 12px; / * Umschreiben für 1/4 und 1/2 * /}

Da es sich bei em um eine relative Einheit handelt, die auf der geerbten Schriftgröße basiert, ist die Vorhersagbarkeit für das, was Sie auf dem Bildschirm erhalten, möglicherweise gering - insbesondere in großen Teams. Aber Sie werden eine hohe Verhältnismäßigkeit haben; Eigenschaften, deren Größe in em festgelegt ist, werden neu berechnet, wenn Sie die Schriftgröße in einem übergeordneten Element anpassen.

body {Schriftgröße: 16px;} h1 {Schriftgröße: 2em; / * relative Einheit * / Polsterung: .25em .5em; / * relative Einheiten zum Auffüllen * /} .foo {Schriftgröße: .75em; }}

Sie haben also das Schreiben eines ganzen Regelsatzes mit em gespeichert. Die auf 24px berechnete Schriftgröße und die auf 6px 12px berechnete Auffüllung.

Der große Unterschied ist also die Fähigkeit, die Größe der Dinge proportional zu haben - ohne mehr Code zu schreiben!

Fußnoten

[1] Syntax und grundlegende Datentypen

[2] Modulstufe 3 für CSS-Werte und -Einheiten

[3] Wie unterscheiden sich "em", "px" und "%" in CSS voneinander?

[4] Auf Responsive Websites dreht sich alles um das Messen (in Ihrem CSS).


Antwort 2:

px ist Pixel. Es kann in verschiedenen Browsern geringfügig unterschiedlich sein, ist jedoch wahrscheinlich in derselben Umgebung und auf einer Website in einem bestimmten Browser / Gerät konsistent. px macht Sinn für Dinge wie Linien- und Randbreite.

em entspricht der Schriftgröße des aktuellen Elements (das im Allgemeinen vererbt wird). Wenn sich also die Schriftgröße ändert, ändert sich auch der Wert von em. Dies ist praktisch, wenn Sie etwas relativ zur aktuellen Textgröße platzieren möchten. Es ist auch nützlich, weil es relativ zu anderen Inhalten ist, sodass es mit größerer Wahrscheinlichkeit über Bildschirme hinweg funktioniert. em ist besonders nützlich, um Abstände, Ränder und das Auffüllen von Text festzulegen.

rem ist root em. Es ist genau wie em, aber anstatt relativ zur aktuellen Schriftgröße zu sein, ist es relativ zur ursprünglichen Schriftgröße des Dokuments. Dies bedeutet, dass rem unabhängig von der aktuellen Schriftart auf einer Seite konsistent bleibt. In vielen Situationen ist es einfacher, mit rem zu arbeiten, da es vorhersehbarer ist. Dies ist insbesondere für Ränder sinnvoll, die in einem Dokument konsistent bleiben müssen, auch wenn sich die lokalen Schriftgrößen zwischen den Elementen ändern.

Im Allgemeinen sind em und rem auf einer Seite einfacher zu pflegen, und der allgemeine Konsens besteht derzeit darin, em und rem anstelle von px zu verwenden. Der allgemeine Konsens ist nicht immer richtig, aber es ist ein guter Weg, es sei denn, Sie haben einen guten Grund, etwas anderes zu tun.


Antwort 3:

px ist Pixel. Es kann in verschiedenen Browsern geringfügig unterschiedlich sein, ist jedoch wahrscheinlich in derselben Umgebung und auf einer Website in einem bestimmten Browser / Gerät konsistent. px macht Sinn für Dinge wie Linien- und Randbreite.

em entspricht der Schriftgröße des aktuellen Elements (das im Allgemeinen vererbt wird). Wenn sich also die Schriftgröße ändert, ändert sich auch der Wert von em. Dies ist praktisch, wenn Sie etwas relativ zur aktuellen Textgröße platzieren möchten. Es ist auch nützlich, weil es relativ zu anderen Inhalten ist, sodass es mit größerer Wahrscheinlichkeit über Bildschirme hinweg funktioniert. em ist besonders nützlich, um Abstände, Ränder und das Auffüllen von Text festzulegen.

rem ist root em. Es ist genau wie em, aber anstatt relativ zur aktuellen Schriftgröße zu sein, ist es relativ zur ursprünglichen Schriftgröße des Dokuments. Dies bedeutet, dass rem unabhängig von der aktuellen Schriftart auf einer Seite konsistent bleibt. In vielen Situationen ist es einfacher, mit rem zu arbeiten, da es vorhersehbarer ist. Dies ist insbesondere für Ränder sinnvoll, die in einem Dokument konsistent bleiben müssen, auch wenn sich die lokalen Schriftgrößen zwischen den Elementen ändern.

Im Allgemeinen sind em und rem auf einer Seite einfacher zu pflegen, und der allgemeine Konsens besteht derzeit darin, em und rem anstelle von px zu verwenden. Der allgemeine Konsens ist nicht immer richtig, aber es ist ein guter Weg, es sei denn, Sie haben einen guten Grund, etwas anderes zu tun.