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, das dies veranschaulicht?

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

Definition von Einheiten

• px ist eine absolute Maßeinheit (wie in , pt oder cm ), die ebenfalls 1/96 einer in- Einheit beträgt (mehr dazu später). Da es sich um ein absolutes Maß handelt, kann es jederzeit verwendet werden, wenn Sie etwas als 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 Seitendesign also absolute Einheiten wie px anstelle von % verwendet , wird es nicht an die Breite des Browsers angepasst. Dies ist nicht von Natur aus gut oder schlecht, sondern nur eine Entscheidung, die der Designer treffen muss, um eine exakte Größe einzuhalten und unflexibel zu sein, anstatt sich zu dehnen, aber dabei nicht an einer exakten Größe festzuhalten. Es ist typisch für eine Site, eine Mischung aus Objekten mit fester und flexibler Größe zu haben.

  Elemente mit fester Größe müssen häufig in die Seite integriert werden, z. B. Werbebanner, Logos oder Symbole. Dies stellt sicher, dass Sie fast immer mindestens einige px-basierte Messungen in einem Design benötigen . Bilder werden beispielsweise (standardmäßig) so skaliert, dass jedes Pixel 1 * px * groß ist. Wenn Sie also um ein Bild herum entwerfen, benötigen Sie px- Einheiten. Es ist auch sehr nützlich für die präzise Schriftgröße und für Randbreiten, wo es aufgrund von Rundungen am sinnvollsten ist, px- Einheiten für die meisten Bildschirme zu verwenden.

  Alle absoluten Messungen sind eng miteinander verbunden; das heißt, 1in ist immer 96px , wie 1in ist immer 72pt . (Beachten Sie, dass 1 Zoll fast nie ein physischer Zoll ist, wenn es um bildschirmbasierte Medien geht). Alle absoluten Messungen übernehmen eine nominelle Auflösung von 96ppi und einen nominalen Betrachtungsabstand von einem Desktop - Monitor und auf einem solchen Bildschirm ein Pixel wird gleich eins physikalischen Pixel auf dem Bildschirm und einer inentspricht 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 überschrieben haben, indem Sie Ihre Schriftgröße mit einer absoluten Einheit (z. B. px oder pt ) festgelegt haben, wird dies durch die Auswahl der Schriftarten im Browser oder im Betriebssystem des Benutzers beeinflusst, sofern diese erstellt wurden. Dies ist daher nicht sinnvoll um sie als allgemeine Längeneinheit zu verwenden, es sei denn, Sie möchten ausdrücklich, dass sie mit der Schriftgröße skaliert.

  Verwenden Sie em, wenn Sie möchten, dass die Größe von etwas von der aktuellen Schriftgröße abhängt.

• % ist in diesem Fall auch eine relative Einheit, bezogen auf die Höhe oder 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.

  Durch die Verwendung von % Einheiten in Ihrem Design kann sich Ihr Design an die Breite des Bildschirms / Geräts anpassen, während die Verwendung einer absoluten Einheit wie px dies nicht tut.

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

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

Beachten Sie, wie sich die oberen Schaltflächen und die Seitenregisterkarten überlappen. Wenn sie em Einheiten anstelle von px verwendet hätten, hätte es kein Problem gegeben.

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 haben nicht bemerkt, dass ich die Frage allgemein gehalten habe, da ich nicht über die Größe von Schriftarten per se gesprochen habe. Ich war mehr daran interessiert, wie man Stile für ein bestimmtes Blockelement auf der Seite definiert.

Wie Henrik Paul und andere betonten, ist em proportional zur im Element verwendeten Schriftgröße. Es ist üblich, Größen für Blockelemente in px zu definieren. Die Größenänderung von Schriftarten in Browsern bricht jedoch normalerweise dieses Design. Das Ändern der Schriftgröße erfolgt normalerweise mit den Tastenkombinationen Ctrl+ +oder Ctrl+ -. Eine gute Praxis ist es also, stattdessen Ems zu verwenden.

Verwenden Sie px, um die Breite zu definieren

Hier ist ein veranschaulichendes Beispiel. Angenommen, wir haben ein Div-Tag, das wir in ein stilvolles Datumsfeld verwandeln möchten. Möglicherweise haben wir HTML-Code, der folgendermaßen aussieht:

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

Eine einfache Implementierung würde die Breite der date-boxKlasse 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 Rahmens , was fast dem entspricht, was mit dem Design von SO geschieht, wie Flodin hervorhebt . Dies liegt daran, dass die Box dieselbe Breite hat, an der sie verriegelt ist 50px.

Verwenden Sie sie stattdessen

Eine intelligentere Methode besteht darin, stattdessen die Breite 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, dh 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 *10pt definiert und auf das 2,5-fache dieser Schriftgröße vergrößert. Wenn Sie also die Schriftgröße im Browser ändern, hat die Box die 2,5-fache Größe dieser Schriftgröße.

Die Antwort von Thomas Rutter, die hier am besten gewählt wurde, stimmt mit seiner Antwort über die Em überein . Ist aber sehr sehr falsch über die Größe eines Pixels. Obwohl es alt ist, kann ich es nicht undebiert lassen.

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

Ein Pixel hat KEINE feste physische Größe.
(Ja, es ist nur auf einem Bildschirm festgelegt, aber auf dem nächsten Bildschirm ist ein Pixel höchstwahrscheinlich größer oder kleiner und mit Sicherheit NICHT 1/96 Zoll groß.)


Beweis
Zeichnen Sie eine Linie mit einer Länge von 960 Pixel. 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? Immer noch nicht?
Zeigen Sie die Linie auf Ihrem iPhone. Immer noch gleich groß? Warum nicht?

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

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 mithilfe von emskalieren, werden sie entsprechend skaliert.

Weil das em ( http://en.wikipedia.org/wiki/Em_(typography) ) direkt proportional zur aktuell verwendeten Schriftgröße ist. Wenn die Schriftgröße beispielsweise 16 Punkte beträgt, beträgt ein Em 16 Punkte. Wenn Ihre Schriftgröße 16 Pixel beträgt ( Hinweis : nicht mit Punkten identisch), beträgt ein Em 16 Pixel.

Dies führt zu zwei (verwandten) Dingen:

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

Beispiel:

Code: body {font-size: 10px;} // halte alle 10 Größen unter 10 korrekt, ändere diesen Wert und der Rest ändert sich, um zB 1,4 dieses Wertes zu sein

1 {Schriftgröße: 1.2em;} // 12px

2 {Schriftgröße: 1.4em;} // 14px

3 {Schriftgröße: 1.6em;} // 16px

4 {Schriftgröße: 1.8em;} // 18px

5 {Schriftgröße: 2em;} // 20px

…

Körper

1

2

3

4

5

Durch Ändern des Wertes im Körper ändert sich der Rest automatisch in eine Art Zeit des Basiswerts…

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

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

Ein sehr praktischer Grund ist, dass Sie in IE 6 die Größe der Schriftart nicht ändern können, wenn sie mit px angegeben wird, wohingegen dies der Fall ist, wenn Sie eine relative Einheit wie em oder Prozentsätze verwenden. Es ist für die Barrierefreiheit sehr schlecht, dem Benutzer nicht zu erlauben, die Schriftgröße zu ändern. Obwohl es rückläufig ist, gibt es immer noch viele IE 6-Benutzer.

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

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, ändert sich die Größe nicht (in IE 6 und anderen), wenn der Benutzer eine größere Textgröße wählt . Dies ist sehr schlecht für Benutzer mit Sehbehinderungen.

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

Ihre Bilder sollten weiterhin mit px-Größen angezeigt werden, aber im Allgemeinen wird es nicht als gute Form angesehen, Ihren Text mit px zu dimensionieren.

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

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

body {
  font-size: 62.5%;
}

Geben Sie nun p(und andere) Tags wie folgt 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.

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

Traingamer stellte bereits die erforderlichen Links zur Verfügung .

Pixel ist eine absolute Einheit, während rem / em relative Einheiten sind. Für mehr: https://drafts.csswg.org/css-values-3/

Sie sollten die relative Einheit verwenden, wenn die Schriftgröße an die Schriftgröße des Systems angepasst werden soll, da das System den Wert für die Schriftgröße für das Stammelement bereitstellt, das das HTML-Element ist.

In diesem Fall, in dem die Webseite in Google Chrome geöffnet ist, wird die Schriftgröße für das HTML-Element durch Chrome festgelegt. Ändern Sie sie, um die Auswirkungen auf Webseiten mit Schriftarten von Rem / Em-Einheiten zu sehen.

Wenn Sie pxals Einheit für Schriftarten verwenden, wird die Größe der Schriftarten nicht geändert, während die Schriftarten mit rem/em unit geändert wird, wenn Sie die Schriftgröße des Systems ändern.

Verwenden pxSie diese Option, wenn die Größe festgelegt werden soll, und verwenden Sie rem/, emwenn die Größe an die Größe des Systems angepasst / dynamisch sein soll.

Der allgemeine Konsens besteht darin, Prozentsätze für die Schriftgröße zu verwenden, da diese für alle Browser / Plattformen konsistenter sind.

Es ist allerdings lustig, ich habe immer pt für die Schriftgröße verwendet und ich habe angenommen, dass alle Websites dies verwenden. Normalerweise verwenden Sie in anderen Apps (z. B. Word) keine px-Größen. Ich denke, das liegt daran, dass sie zum Drucken bestimmt sind - aber die Größe ist in einem Webbrowser dieselbe wie in Word ...

Vermeiden Sie em oder px, verwenden Sie stattdessen rem, da es einfacher ist, den berechneten Wert zu finden. Aber zwischen em und px ist px besser, weil es schwierig ist, sie zu debuggen.