it-swarm.com.de

Warum em statt px?

Ich habe gehört, Sie sollten Größen und Abstände in Ihrem Stylesheet mit em anstatt in Pixel definieren. Die Frage ist also, warum ich em anstelle von px verwenden soll, wenn ich Stile in CSS definiere. Gibt es ein gutes Beispiel dafür?

738
Spoike

Der Grund, warum ich diese Frage gestellt habe, war, dass ich vergessen habe, wie man sie benutzt, da ich eine Weile glücklich in CSS gehackt habe. Die Leute bemerkten nicht, dass ich die Frage allgemein hielt, da ich nicht über die Größe von Schriftarten per se sprach. Ich war mehr daran interessiert, wie man Stile für bestimmte Blockelemente auf der Seite definiert.

Wie Henrik Paul und andere wiesen darauf hin, ist em proportional zur im Element verwendeten Schriftgröße. Es ist eine gängige Praxis, die Größe von Blockelementen in px zu definieren. Die Größenanpassung von Schriftarten in Browsern unterbricht dieses Design jedoch normalerweise. Das Ändern der Schriftgröße erfolgt normalerweise mit den Tastenkombinationen Ctrl++ oder Ctrl+-. Es ist also eine gute Praxis, stattdessen ems zu verwenden.

Verwenden Sie px, um die Breite zu definieren

Hier ist ein illustrierendes Beispiel. Angenommen, wir haben ein Div-Tag, das wir in ein stilvolles Datumsfeld verwandeln möchten. Möglicherweise haben wir einen HTML-Code, der so aussieht:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Eine einfache Implementierung würde die Breite der Klasse date-box in px definieren:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

Das Problem

Wenn wir jedoch den Text in unserem Browser vergrößern möchten, wird das Design beschädigt. Der Text blutet auch außerhalb des Kästchens aus, was fast das Gleiche ist, was mit SOs Design passiert, wie flodin hervorhebt. Dies liegt daran, dass die Box in der Breite dieselbe Größe behält, wie sie für 50px gesperrt ist.

Verwenden Sie stattdessen em

Eine intelligentere Möglichkeit besteht darin, die Breite stattdessen in ems zu definieren:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

Auf diese Weise haben Sie ein fließendes Design auf dem Datumsfeld, d. H. Das Feld wird zusammen mit dem Text proportional zur für das Datumsfeld definierten Schriftgröße vergrößert. In diesem Beispiel wird die Schriftgröße in * als 10pt definiert und das 2,5-fache dieser Schriftgröße erreicht. Wenn Sie also die Schriftgrößen im Browser anpassen, hat das Feld die 2,5-fache Größe dieser Schriftgröße.

89
Spoike

Es ist falsch zu behaupten, dass eine bessere Wahl ist als die andere (oder beide hätten in der Spezifikation nicht ihren eigenen Zweck angegeben). Es kann sogar erwähnenswert sein, dass StackOverflow in großem Umfang px-Einheiten verwendet. Es ist nicht die schlechte Wahl, die Spoike mitgeteilt wurde.

Definition der Einheiten

  • px ist eine absolute Maßeinheit (wie in, pt ​​oder cm), die ebenfalls 1 ist/96 einer in Einheit (mehr dazu später). Da es sich um ein absolutes Maß handelt, kann es immer dann verwendet werden, wenn Sie eine bestimmte Größe definieren möchten, anstatt proportional zu etwas anderem wie der Größe des Browserfensters oder der Schriftgröße zu sein.

    Wie alle anderen absoluten Einheiten skalieren px Einheiten nicht entsprechend der Breite des Browserfensters. Wenn Ihr gesamtes Seiten-Design also absolute Einheiten wie px anstelle von % verwendet, passt es sich nicht an die Breite des Browsers an. Dies ist nicht von Natur aus gut oder schlecht, sondern eine Entscheidung, die der Designer treffen muss, um zwischen der Einhaltung einer exakten Größe und der Unbeweglichkeit im Vergleich zur Dehnung zu wählen, während er sich nicht an eine exakte Größe hält. Es wäre typisch für eine Site, eine Mischung aus Objekten mit fester Größe und Objekten mit flexibler Größe zu haben.

    Oft müssen Elemente mit fester Größe in die Seite eingebunden werden - beispielsweise Werbebanner, Logos oder Symbole. Dies stellt sicher, dass Sie fast immer mindestens einige px-basierte Maße in einem Entwurf benötigen. Bilder werden beispielsweise (standardmäßig) so skaliert, dass jedes Pixel 1 * px * groß ist. Wenn Sie also ein Bild umrahmen, benötigen Sie px Einheiten. Es ist auch sehr nützlich für die genaue Schriftgröße und für Rahmenbreiten, bei denen es aufgrund von Rundungen am sinnvollsten ist, px Einheiten für die meisten Bildschirme zu verwenden.

    Alle absoluten Maße sind eng miteinander verbunden; das heißt 1in ist immer96px, genau wie 1in ist immer - 72pt. (Beachten Sie, dass 1in eigentlich fast nie ein physisches Zoll ist, wenn es um bildschirmbasierte Medien geht). Alle absoluten Messungen setzen eine nominelle Bildschirmauflösung von 96ppi und einen nominellen Betrachtungsabstand eines Desktop-Monitors voraus. Auf einem solchen Bildschirm entspricht ein px einem physischen Pixel auf dem Bildschirm screen und one in entsprechen 96 physischen Pixeln. Auf Bildschirmen, die sich entweder in der Pixeldichte oder im Betrachtungsabstand erheblich unterscheiden, oder wenn der Benutzer die Seite mit der Zoomfunktion des Browsers gezoomt hat, bezieht sich px nicht mehr unbedingt auf physische Pixel.

  • em ist keine absolute Einheit - es ist eine Einheit, die relativ zur aktuell gewählten Schriftgröße ist. Sofern Sie den Schriftstil nicht durch Festlegen der Schriftgröße mit einer absoluten Einheit (z. B. px oder pt) überschrieben haben, wird dies durch die Auswahl der Schriftarten im Browser des Benutzers beeinflusst oder OS, wenn sie eine erstellt haben, daher ist es nicht sinnvoll, em als allgemeine Längeneinheit zu verwenden, es sei denn, Sie möchten ausdrücklich, dass es mit der Skalierung der Schriftgröße skaliert.

    Verwenden Sie em, wenn die Größe eines Elements von der aktuellen Schriftgröße abhängen soll.

  • % ist in diesem Fall auch eine relative Einheit, entweder in Bezug auf die Höhe oder die Breite eines übergeordneten Elements. Sie sind eine gute Alternative zu px Einheiten für Dinge wie die Gesamtbreite eines Designs, wenn Ihr Design nicht auf bestimmte Pixelgrößen angewiesen ist, um seine Größe festzulegen.

    Die Verwendung von % Einheiten in Ihrem Design ermöglicht es Ihrem Design, sich an die Breite des Bildschirms/Geräts anzupassen, während die Verwendung einer absoluten Einheit wie px dies nicht tut.

539
thomasrutter

Ich habe einen kleinen Laptop mit einer hohen Auflösung und muss Firefox mit 120% Textzoom ausführen, um lesen zu können, ohne zu blinzeln.

Viele Sites haben Probleme damit. Das Layout wird verzerrt, der Text in den Schaltflächen wird halbiert oder verschwindet vollständig. Sogar stackoverflow.com leidet darunter:

Screenshot of Firefox at 120% text zoom

Beachten Sie, wie sich die oberen Schaltflächen und die Seitenregisterkarten überlappen. Wenn sie em-Einheiten anstelle von px verwendet hätten, wäre kein Problem aufgetreten.

141
flodin

Die hier oben gewählte Antwort von thomasrutter ist richtig in seiner Antwort über die em . Ist aber sehr sehr falsch über die Größe eines Pixels. Also, obwohl es alt ist, kann ich nicht zulassen, dass es unberührt bleibt.

Ein Computerbildschirm ist normalerweise NICHT 96dpi! (Oder ppi, wenn Sie pedantisch sein wollen.)


Ein Pixel hat KEINE feste physikalische Größe.
(Ja, es ist nur innerhalb eines Bildschirms festgelegt, aber im nächsten Bildschirm ist ein Pixel höchstwahrscheinlich größer oder kleiner und sicher NICHT 1/96 Zoll.)


Beweis
Zeichnen Sie eine Linie mit einer Länge von 960 Pixeln. Messen Sie es mit einem physischen Lineal. Ist es 10 Zoll? Nein..?
Schließen Sie Ihren Laptop an Ihren Fernseher an. Ist die Linie jetzt 10 Zoll? Noch immer nicht?
Zeigen Sie die Linie auf Ihrem iPhone. Immer noch die gleiche Größe? Warum nicht?

Wer zum Teufel hat den 96-dpi-Computerbildschirm-Mythos erfunden?
(Einige Religionen arbeiten mit einem 72-dpi-Mythos. Aber ebenso falsch.)

60
Vbakke

Es ist nützlich für alles, was entsprechend der Schriftgröße skaliert werden muss.

Dies ist besonders nützlich in Browsern, die den Zoom durch Skalieren der Schriftgröße implementieren. Wenn Sie also alle Ihre Elemente mit em skalieren, werden sie entsprechend skaliert.

48
Daniel Rikowski

Denn das em ( http://en.wikipedia.org/wiki/Em_ (Typografie) ) ist direkt proportional zur aktuell verwendeten Schriftgröße. Wenn die Schriftgröße beispielsweise 16 Punkte beträgt, entspricht ein Punkt 16 Punkten. Wenn Ihre Schriftgröße 16 Pixel beträgt (, beachten Sie , dass dies nicht mit Punkten übereinstimmt), sind es 16 Pixel.

Dies führt zu zwei (verwandten) Dingen:

  1. es ist einfach, die Proportionen beizubehalten, wenn Sie die Schriftgrößen später in Ihrem CSS bearbeiten.
  2. Viele Browser unterstützen benutzerdefinierte Schriftgrößen und überschreiben Ihr CSS. Wenn Sie alles in Pixeln entwerfen, kann Ihr Layout in diesen Fällen beschädigt werden. Wenn Sie jedoch ems verwenden, sollten diese Überschreibungen diese Probleme mindern.
21
Henrik Paul

beispiel:

Code: body {font-size: 10px;} // halte alle Größen unter korrekt, ändere diesen Wert und der Rest ändert sich auf z. 1,4 von diesem Wert

1 {font-size: 1.2em;} // 12px

2 {font-size: 1.4em;} // 14px

3 {font-size: 1.6em;} // 16px

4 {font-size: 1.8em;} // 18px

5 {font-size: 2em;} // 20px

körper

1

2

3

4

5

wenn Sie den Wert im Körper ändern, wird der Rest automatisch so geändert, dass er eine Art Mal dem Basiswert entspricht.

10 × 2 = 20 10 × 1,6 = 16 usw

sie könnten den Basiswert als 8px haben ... also kann 8 × 2 = 16 8 × 1,6 = 12,8 // vom Browser gerundet werden

11

Ein sehr praktischer Grund ist, dass Sie mit IE 6 die Schriftgröße nicht ändern können, wenn sie mit px angegeben wird, wohingegen dies bei Verwendung einer relativen Einheit wie em oder Prozentsätzen der Fall ist. Wenn der Benutzer die Schriftgröße nicht ändern darf, ist dies für die Barrierefreiheit sehr schlecht. Obwohl es rückläufig ist, gibt es immer noch viele IE 6 Benutzer.

8
John Topley

verwenden Sie px, um grafische Elemente präzise zu platzieren. Verwenden Sie em für Messungen, bei denen Textelemente wie die Zeilenhöhe usw. positioniert und voneinander beabstandet werden müssen. px ist pixelgenau und kann sich mit der verwendeten Schriftart dynamisch ändern

7
Scott Evernden

Es gibt eine einfache Lösung, wenn Sie px verwenden möchten, um die Schriftgröße festzulegen, aber dennoch die Benutzerfreundlichkeit möchten, die sie bieten, indem Sie dies in Ihre CSS-Datei einfügen:

body {
  font-size: 62.5%;
}

Geben Sie jetzt p (und andere) Tags wie dieses an:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

Und so weiter.

2
Anonymous Coder

Der Hauptgrund für die Verwendung von em oder Prozentsätzen besteht darin, dass der Benutzer die Textgröße ändern kann, ohne das Design zu beschädigen. Wenn Sie mit in px angegebenen Schriftarten entwerfen, ändern sie nicht die Größe (in IE 6 und anderen), wenn der Benutzer die Textgröße - größer wählt. Dies ist sehr schlecht für Benutzer mit Sehbehinderungen.

In der neuesten Ausgabe von A List Apart finden Sie einige Beispiele und Artikel zu Designs wie diesem (es stehen unzählige zur Auswahl): Fluid Grids , der ältere Artikel How to Size Text in CSS oder Dan Cederholms Bulletproof Web Design .

Ihre Bilder sollten immer noch in px angezeigt werden, aber im Allgemeinen wird es nicht als gute Form angesehen, die Größe Ihres Textes mit px festzulegen.

So sehr ich IE6 persönlich verachte, ist es derzeit der einzige Browser, der für den Großteil der Benutzer in unserem Fortune 200-Unternehmen zugelassen ist.

2
Traingamer

Hier ist die Definition für die verschiedenen Einheiten in CSS: http://www.w3.org/TR/css3-values/#lengths .

2
Ryan

Sie möchten sie wahrscheinlich für Schriftgrößen verwenden, bis der IE6 (von Ihrer Site) entfernt wurde. Px ist in Ordnung, wenn das Zoomen von Seiten (im Gegensatz zum Zoomen von Text) zum Standardverhalten wird.

Traingamer hat bereits die erforderlichen Links bereitgestellt.

0
user73912