•  03-07-2019
  •  | 
  •  

Frage

Ich habe gehört, Sie Größen und Entfernungen in Ihrem Stylesheet mit em statt in Pixeln definieren sollten. Die Frage ist also, warum sollte ich em statt px verwenden, wenn Stile in CSS definieren? Gibt es ein gutes Beispiel, das dies zeigt?

War es hilfreich?

Lösung 3

Der Grund, warum ich diese Frage gestellt war, dass ich vergessen, wie em zu bedienen, da es eine Zeit lang war ich glücklich in CSS-Hacking. Die Leute merken nicht, dass ich die Frage allgemein gehalten, da ich nicht über Sizing Fonts per se sprach. Ich war mehr daran interessiert, wie Stile auf einem bestimmten Blockelement auf der Seite zu definieren.

Wie Henrik Paul und andere wiesen darauf hin, em ist proportional zu die font-size im Element verwendet wird. Es ist eine gängige Praxis Größen auf Block-Elementen in Pixel zu definieren, jedoch bricht taxieren Schriftarten in Browser in der Regel dieses Design. Ändern der Größe von Schriftarten wird häufig mit den Shortcut-Tasten getan Strg + + oder Strg + - . So eine gute Praxis ist em ist stattdessen zu verwenden.

px Mit der Breite

zu definieren,

Hier ist ein Beispiel zur Veranschaulichung. Sagen wir, wir haben ein div-Tag, das wir in einem stilvollen Datumsfeld machen wollen, können wir den HTML-Code haben, der wie folgt 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-box Klasse in Pixel 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 an Größe des Text nach oben in unserem Browser wollen das Design brechen. Der Text wird auch außerhalb der Box blutet, die fast das gleiche ist, was mit SO-Design wie Flodin darauf hinweist. Dies liegt daran, das Feld wird die gleiche Größe in der Breite bleiben, wie es ist gesperrt zu 50px.

Mit em statt

Eine intelligentere Weise ist die Breite in ems anstatt 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 kann ein Fluid-Design auf dem Tag-Feld hast, das heißt die Box Größe zusammen mit dem Text im Verhältnis zur Schriftgröße für das Datum-Feld definiert ist. In diesem Beispiel wird die font-size definiert in * als 10pt und Willen Größe bis 2,5-fache auf diese Schriftgröße. Also, wenn Sie die Schriftart im Browser sind Sizing, wird die Box hat die 2,5-fache Größe dieses font-size.

Andere Tipps

Es ist falsch zu sagen, dass man eine bessere Wahl als die anderen (oder beide hätten ihre eigenen Zwecke in der Spezifikation nicht angegeben). Es kann sogar lohnen, unter Hinweis darauf, dass Stackoverflow umfangreiche Verwendung von Pixel-Einheiten macht. Es ist nicht die schlechte Wahl Spoike wurde gesagt, es ist.

Definition von Einheiten

  • Pixel ist eine absolute Maßeinheit (wie in pt oder cm ) das geschieht auch 1/96 eine in Einheit (mehr darüber, warum später) zu sein. Da es sich um eine absolute Messung ist, kann es jederzeit möglich, etwas definieren wollen verwendet werden, eine bestimmte Größe zu sein, anstatt sonst wie die Größe des Browser-Fensters, um etwas proportional zu sein oder die Schriftgröße.

    Wie alle anderen absoluten Einheiten, Pixel Einheiten skaliert nicht entsprechend der Breite des Browserfensters. Wenn also Ihre gesamte Seiten-Design verwendet absolute Einheiten wie Pixel statt % , wird es nicht auf die Breite des Browsers anpassen. Dies ist nicht von Natur aus gut oder schlecht, nur eine Wahl, dass der Designer zwischen der Einhaltung einer exakten Größe zu machen braucht und sind unflexibel gegenüber Dehnung, aber in dem Prozess auf eine genaue Größe nicht haften. Es wäre typisch für eine Website eine Mischung aus fester Größe und flexible große Objekte zu müssen.

    Feste Größe Elemente müssen oft in die Seite integriert werden - wie zum Beispiel Werbebanner, Logos oder Icons. Dadurch wird sichergestellt, Sie fast immer zumindest brauchen einige Pixel-basierte Messungen in einem Design. Bilder, zum Beispiel, werden (standardmäßig) so skaliert werden, dass jedes Pixel 1 * px * in Größe ist, wenn Sie also um ein Bild entwerfen werden Sie brauchen Pixel Einheiten. Es ist auch sehr nützlich für die präzisen Schriftgrößen und für Rahmenbreiten, wo aufgrund von Rundungen es am meisten Sinn macht zu verwenden Pixel Einheiten für die meisten Bildschirme.

    Alle absolute Messungen sind starr miteinander verwandt; das heißt, 1in ist immer 96px , wie 1in ist immer 72pt . (Beachten Sie, dass 1in ist so gut wie nie tatsächlich ein physisches Zoll , wenn man über Bildschirm-basierte Medien zu sprechen). 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 ein physischen Pixel auf der gleich Bildschirm und eine in wird zu 96 physikalischen Pixel gleich sein. Auf Bildschirme, die deutlich in jeder Pixeldichte oder Betrachtungsabstand unterscheiden, oder wenn der Benutzer die Seite mit dem Browser Zoomfunktion vergrößert hat, Pixel nicht mehr unbedingt auf physische Pixel beziehen.

  • em ist keine absolute Einheit - es ist eine Einheit, die auf die aktuell gewählte Schriftgröße relativ ist. Es sei denn, Sie haben Schriftart außer Kraft gesetzt durch die Schriftgröße mit einer absoluten Einheit einstellen (wie Pixel oder pt ), wird dies durch die Auswahl von Schriftart in dem Browser des Benutzers beeinflusst werden oder OS, wenn sie eine gemacht haben, so macht es keinen Sinn machen em als allgemeine Längeneinheit zu verwenden, es sei denn, Sie speziell wollen es wie die Schriftgrößenskalen skalieren.

    Mit em , wenn Sie speziell auf die Größe von etwas wollen auf der aktuellen Schriftgröße abhängig zu sein.

  • % ist auch eine relative Einheit, in diesem Fall in Bezug auf entweder die Höhe oder die Breite eines Elternelements. Sie sind eine gute Alternative zu Pixel Einheiten für Dinge wie die gesamte Breite eines Entwurfs, wenn Ihr Design beruht nicht auf bestimmte Pixelgrößen seiner Größe eingestellt werden.

    Mit % Einheiten in Ihrem Design ermöglicht Ihr Design auf die Breite des Bildschirms / Geräts, während mit einer absoluten Einheit wie Pixel nicht anzupassen.

Ich habe einen kleinen Laptop mit einer hohen Auflösung und habe Firefox in 120% Text Zoom auszuführen, ohne Schielen lesen zu können.

Viele Websites haben Probleme mit diesem. Das Layout wird alle verstümmelt, Text in Tasten in zwei Hälften geschnitten wird oder ganz verschwindet. Auch stackoverflow.com darunter leidet:

Screenshot von Firefox bei 120% Text zoomen

Beachten Sie, wie die oberen Knöpfe und die Seitenlaschen überlappen. Wenn sie em-Einheiten verwendet hätten statt px, wäre es kein Problem gewesen sein.

Die oben gestimmt hier Antwort von thomasrutter Recht in seiner Antwort geht es um die em . Aber ist sehr, sehr falsch über die Größe eines Pixels. Also auch wenn es alt ist, kann ich nicht zulassen, dass undebated sein.

Ein Computer-Bildschirm ist in der Regel nicht 96 dpi! (Oder ppi, wenn Sie wollen, pedantisch sein.)


Ein Pixel verfügt nicht über eine feste Größe.
(Ja, ist es fest in einen Bildschirm nur, aber im nächsten Bildschirm ein Pixel ist höchstwahrscheinlich größer oder kleiner ist, und schon gar nicht 1/96 von einem Zoll.)


Beweis
Zeichnen Sie eine Linie, 960 Pixel lang. Messen Sie mit einem physischen Lineal. Ist es 10 Zoll? Nein ..?
Verbinden Sie Ihren Laptop an den Fernseher. Ist die Linie 10 Zoll jetzt? Immer noch nicht?
Zeigen Sie die Linie auf Ihrem iPhone. Noch gleiche Größe? Warum nicht?

Wer zum Teufel die 96 dpi Computer-Bildschirm Mythos erfunden?
(Einige Religionen arbeiten mit einem 72 dpi Mythos. Aber ebenso falsch.)

Es ist der Gebrauch für alles, was nach der Schriftgröße zu skalieren hat.

Es ist besonders nützlich für Browser, den Zoom implementieren, indem die Schriftgröße zu skalieren. Also, wenn Sie Größe alle Elemente em mit skalieren sie entsprechend an.

Da die em ( http://en.wikipedia.org/wiki/Em_(typography ) ) ist direkt proportional zur Zeit in Gebrauch auf die Schriftgröße. Wenn die Schriftgröße ist, sagen, 16 Punkte, ein em 16 Punkten. Wenn die Schriftgröße ist 16 Pixel ( Hinweis : nicht das gleiche wie Punkte)., Ein em 16 Pixel

Dies führt zu zwei (bezogen) Dinge:

  1. ist es einfach, Proportionen zu halten, wenn Sie Ihre Schriftgrößen in CSS bearbeiten wählen später.
  2. Viele Browser unterstützen benutzerdefinierte Schriftgrößen, CSS überschreiben. Wenn Sie alles in Pixel entwerfen, Ihr Layout könnte in diesen Fällen brechen. Aber, wenn Sie ems verwenden, sollten diese Übersteuerungen, diese Probleme mildern.

Beispiel:

Code: body {font-size: 10px;} // bei 10 halten alle Größen unten korrigieren, diesen Wert ändern und den Rest Schalte zum Beispiel zu sein, 1.4 dieser 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

durch den Wert im Körper den Rest Wechsel ändert automatisch eine Art mal der Basiswert zu sein ...

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

könnten Sie den Basiswert als 8px ... haben so 8 × 2 = 16 8 x 1,6 = 12,8 // kann durch Browser gerundet

Ein sehr praktischer Grund ist, dass IE 6 Sie nicht lassen Sie die Schriftart Größe ändern, wenn es px angegeben ist verwenden, während es funktioniert, wenn Sie eine relative Einheit wie em oder Prozentsatz verwenden. Nicht den Benutzer ermöglicht, die Schrift, um die Größe ist sehr schlecht für die Zugänglichkeit. Obwohl es im Niedergang ist, gibt es noch eine Menge von IE 6 Nutzer gibt.

Nutzung px für die präzise Platzierung von grafischen Elementen. verwenden em für Messungen Positionierung und Abstand um Textelemente wie Zeilenhöhe usw. px fällt, ist Pixel genau, em kann dynamisch ändert sich mit der Schrift im Einsatz

Der Hauptgrund für em oder Prozentsätze verwendet, ist dem Benutzer zu ermöglichen, ohne die Gestaltung der Textgröße zu ändern. Wenn Sie mit Schriften in Pixel angegeben entwerfen, sie nicht Größe ändern (in IE 6 und andere), wenn der Benutzer wählt Textgröße - größer . Das ist sehr schlecht für Benutzer mit Sehbehinderungen.

Für einige Beispiele und Artikel über Entwürfe so (es gibt eine Vielzahl zur Auswahl) finden Sie in der aktuellen Ausgabe von A List Apart: Fluid Grids , die älteren Artikel Wie Größe Text in CSS oder Dan Cederholm Bulletproof Webdesign .

Ihre Bilder noch mit px Größen angezeigt werden soll, aber im Allgemeinen ist es nicht gut in Form der Größe Ihres Text mit Pixeln betrachtet.

So viel wie ich persönlich IE6 verachten, es ist derzeit die nur Browser für den Großteil der Nutzer in unserem Fortune-200-Unternehmen genehmigt.

Es gibt eine einfache Lösung, wenn Sie Pixel verwenden, um anzugeben, Schriftgröße wollen, wollen aber trotzdem die Benutzerfreundlichkeit, die em die bieten, indem diese in Ihrer CSS-Datei: 

body {
  font-size: 62.5%;
}

Jetzt geben Sie p (und andere) Tags wie folgt aus: 

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 wollen wahrscheinlich em für Schriftgrößen verwenden, bis IE6 (von Ihrer Website) verschwunden ist. Px wird gut sein, wenn Seite Zoomen (im Gegensatz Zoomen auf Text) das Standardverhalten wird.

Traingamer bereitgestellt bereits die notwendigen Links .

Der allgemeine Konsens ist, Prozentsatz für die Schriftgrößen zu verwenden, da es in allen Browsern / Plattformen konsistenter ist.

Es ist zwar komisch, ich immer pt für Schriftgrößen zu verwenden, verwendet und ich nahm an alle Seiten, die verwendet. Sie normalerweise nicht px Größen in anderen Anwendungen (zB Word) verwenden. Ich denke, es ist, weil sie für den Druck sind - aber die Größe ist das gleiche in einem Web-Browser wie in Word ...

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top