Warum em statt px?

766

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?

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

Antworten:

554

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.

Thomasrutter
quelle
27
Es gibt keine Möglichkeit, zwischen ems und Pixeln zu konvertieren, es sei denn, Sie wissen in diesem Zusammenhang, wie groß ein 'em' in Pixel ist. Dies kann von der geerbten Schriftgröße dieses Elements abhängen, die wiederum von der Schriftgröße des gesamten Dokuments abhängen kann, die von den Einstellungen für die Schriftgröße im Browser und / oder Betriebssystem des Benutzers abhängen kann. Wenn Sie eine bestimmte Pixelgröße anstreben, geben Sie diese in Pixel an. Dh wenn Sie 990px ​​wollen, dann setzen Sie 990px. Wenn Sie Pixel möchten, warum nicht?
Thomasrutter
7
Huh? Ich habe nichts gesagt, was dem widerspricht. Ich habe gesagt, wofür px-Einheiten verwendet werden und wofür em-Einheiten verwendet werden. Sie scheinen zu implizieren, dass die Verwendung von px-Einheiten im Allgemeinen schlecht ist. Wenn eine Site beim Anpassen der Standardschriftgröße des Browsers beschädigt wird, liegt der Fehler nicht in px-Einheiten, sondern in schlechten Annahmen. Offensichtlich hat sich der Webdesigner auf die Standardschriftgröße verlassen (oft eine gute Idee) und dennoch den Rest seines Layouts auf der Grundlage falscher Annahmen über diese Schriftgröße erstellt, z. B. beim Versuch, grafische Elemente mit fester Größe an Text auszurichten, wobei die Die Elementgröße entspricht nur dem Text bei einer Schriftgröße.
Thomasrutter
3
Es ist weder falsch noch stark vereinfacht. Natürlich, wenn Sie em in einer Linie verwenden , wo man tatsächlich erklären die font-size, dann ist es unmöglich , em in dieser Zeile Am selben Elements font-size relativ zu sein , nachdem auf dieses Element irgendwelche font-size Erklärungen, weil es gewonnen Das weiß ich noch nicht - stattdessen muss es relativ zur Schriftgröße sein, die das Element gehabt hätte, bevor die Schriftgrößeneigenschaft für dasselbe Element deklariert wurde. Da jedes andere Verhalten buchstäblich unmöglich ist, sehe ich dort keine Mehrdeutigkeit.
Thomasrutter
3
@TalhaSayed, Sie verwechseln Pixel mit der px-Einheit. Sie sind nicht dasselbe - lesen Sie die CSS-Spezifikationen. Die px-Einheit ist eine absolute Einheit im gleichen Sinne wie die in-Einheit oder die cm-Einheit oder die pt-Einheit.
Thomasrutter
7
@ Thomasrutter, WOW! Ich habe nur danach gegoogelt und ja, ich muss sagen, ich habe mich geirrt. All diese Jahre und ich hatte keine Ahnung. Früher dachte ich, dass 1 Pixel = 1 "Punkt auf dem Bildschirm". Ich glaube, ich habe heute etwas Neues gelernt.
Talha
143

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:

Screenshot von Firefox bei 120% Textzoom

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.

Flodin
quelle
15
Sie können Text in Firefox auch zoomen, ohne Bilder in Ansicht -> Zoom -> Nur Text zoomen und dann wie gewohnt zu zoomen.
Thomasrutter
4
+1 guter Punkt. Bei großen Auflösungen können Sie die Bildschirmeinstellung so einstellen, dass Text mit 120 dpi anstelle der Standardauflösung von 96
angezeigt wird
5
@Spoike: Ich würde, aber Firefox berücksichtigt die DPI-Einstellung des Systems nicht. Siehe bugs.launchpad.net/ubuntu/+source/firefox/+bug/19524
flodin
6
@ Juan: Das liegt daran, dass sie die einfachste Zoom-Methode verwenden: die Skalierung der gesamten Seite. Bei einem Zoom von 150% wird eine 1000 Pixel breite Seite jedoch 1500 Pixel breit. Dies ist der einfachste Weg zum Zoomen für Web- und Browserentwickler. Leider ist es nicht sehr benutzerfreundlich. Aus diesem Grund verfügen andere Browser über einen Textzoom, der den Inhalt nur vergrößert, ohne das Layout zu ändern. Dies bedeutet jedoch, dass Webentwickler ihre Layouts grundsätzlich für eine Vielzahl von Schriftgrößen entwerfen müssen, was die Möglichkeiten für das Design stark einschränkt. Es ist ziemlich schwierig, eine Site sowohl in 16pt-Schrift als auch in 48pt-Schrift gut aussehen zu lassen.
Lèse Majesté
1
@Lesemajeste skaliert nicht die gesamte Seite so, wie "Zoom" eigentlich sein sollte. Kommt es nicht zu einem Punkt, an dem der Entwickler den Nischenbenutzern sagen muss, dass sie damit umgehen sollen oder nicht? Ich würde niemals eine einzige Seite unter Berücksichtigung von 16pt- und 48pt-Schriftarten erstellen. Das ist einfach nur dumm und, wie Sie betont haben, sehr einschränkend im Layout. Ich finde es großartig, dass FF einen speziellen Zoom nur für Text erstellen möchte, aber ich werde nicht in diesem Sinne entwerfen.
1934286
93

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.

Spoike
quelle
1
Ich frage mich: Wie wird es sich an Gittersysteme anpassen, indem Prozentsätze für die Breite verwendet werden? Wird es brechen, wenn der Contianing-Block eine Breite von 100% erhält?
Hugo der Hungrige
64
Dies ist heutzutage nicht wahr. Durch Drücken von Ctrl+und Ctrl-in einem modernen Browser werden auch die Pixelwerte skaliert. Das ist schon eine Weile so.
YemSalat
1
@YemSalat Gilt dies auch für die Anpassung der DPI im Betriebssystem?
Angularsen
@anjdreas keine Ahnung um ehrlich zu sein.
YemSalat
4
@spoike, Downvoting dies, da es eindeutig nicht mehr wahr ist, wie in YemSalats
Kommentar
60

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.)

Vbakke
quelle
4
> Um sich ein Bild vom Erscheinungsbild eines px zu machen, stellen Sie sich einen CRT-Computermonitor aus den 90er Jahren vor: Der kleinste Punkt, den er anzeigen kann, misst etwa 0,25 mm (1/100 Zoll) oder etwas mehr. Die px-Einheit erhielt ihren Namen von diesen Bildschirmpixeln. - Zitat aus W3C: w3.org/Style/Examples/007/units.en.html#units
Jay Zelenkov
4
Alle absoluten Messungen sind eng miteinander verbunden; Das heißt, 1 Zoll ist immer * 96px *, genauso wie 1 Zoll immer * 72pt * ist. (Beachten Sie, dass 1 Zoll fast nie ein physischer Zoll ist, wenn es um bildschirmbasierte Medien geht.) Ich glaube nicht, dass die Antwort mit der höchsten Bewertung über physischen Zoll spricht. Die Beziehungen gehören zu den verschiedenen absoluten Größenschemata wie in und pt. Zum Beispiel. Erweitern Sie einfach Ihren 'Beweis', wenn ich eine Linie von 1_in_ zeichne. Wird er physisch 1 Zoll messen?
Saumitra R. Bhave
5
-1 für falsches, irrelevantes Geschwätz. pxist relativ zu einem Referenzpixel dimensioniert , nicht zu den Pixeln auf den Bildschirmen, auf denen Sie sich hier befinden. Das mag Ihnen vielleicht nicht gefallen, aber wenn Sie Ihr Lineal herausholen, wird es weder weniger eine Tatsache sein, noch trägt es zur Beantwortung der Frage bei. stackoverflow.com/questions/27382331/… "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."
underscore_d
52

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.

Daniel Rikowski
quelle
97
Heutzutage implementieren alle modernen Browser das Zoomen, indem sie alle absoluten Einheiten gleich skalieren, anstatt nur die Schriftgrößen zu skalieren. Beachten Sie, dass diese Antwort im Jahr 2009 geschrieben wurde, als dies weniger der Fall war als jetzt.
Thomasrutter
22

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.
Henrik Paul
quelle
Ich habe nur nach einer Berechnungsformel gesucht :-) Vielleicht war es gut, auch ein umgekehrtes Beispiel hinzuzufügen, wie 2pxes 0.125emfür eine 16-Pixel-Schriftart der Fall ist.
Wolf
12

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

Muhammad Usman Ghani
quelle
3
Es wäre besser, ein Bild hinzuzufügen, das den Effekt veranschaulicht.
Wolf
8

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.

John Topley
quelle
1
Beachten Sie, dass IE7 und IE8 die Größe von Text mit einer in Pixel (bis ) angegebenen Schriftgröße immer noch nicht ändern können Page > Text Size. IE7 hat jedoch den Seitenzoom ( Page > Zoom) hinzugefügt , der natürlich die gesamte Seite einschließlich des Textes zoomt.
Mercator
1
Versuchen Sie besser als Page> Zoon, in IE7 +, Chrome und Firefox die Tasten [STRG] + [-] oder [+] auf Ihrer Tastatur zu drücken - Zoomen der gesamten Seite ohne die meisten Probleme, die beim Versuch auftreten, die Schriftgröße zu ändern.
Rich Turner
1
Kaum ein Computer auf der Welt verwendet 2017 IE6
Michael
3
@ MichaelMay Daher, warum die Antwort und andere Kommentare im Jahr 2009 geschrieben wurden ... lol
Chev
7

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

Scott Evernden
quelle
es ist, aber es entspricht nicht den WCAG 2.0-Mindestanforderungen: w3.org/WAI/WCAG20/quickref/Overview.php - Ausreichende Techniken für 1.4.4
meo
2

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.

Traingamer
quelle
1
+1 Flüssigkeitsgitter war eigentlich das, wonach ich gesucht habe, als ich die Frage gestellt habe. (
Sollte
Wenn Sie mich gefragt haben, sollten sie Firefox verwenden, aber sie fragen mich nicht wirklich. :-) (IE7 wäre besser als 6, aber ich bin nicht in die Entscheidungsfindung eingeweiht)
Traingamer
2

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.

Anonymer Codierer
quelle
2
Ist dies nicht stark davon abhängig, dass niemand die benutzerdefinierten CSS-Einstellungen seines Browsers berührt?
Spoike
4
Ja, du solltest einfach einstellen font-size: 10px. css-tricks.com/forums/discussion/1230/…
m33lky
Ich ziehe es vor, die Schriftgröße zu 100% zu
belassen
0

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 .

user73912
quelle
0

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.

Geben Sie hier die Bildbeschreibung ein

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.

thisshri
quelle
-1

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 ...

DisgruntledGoat
quelle
-2

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.

Juan Tamad
quelle
Bitte fügen Sie Ihrer Antwort eine weitere Erklärung hinzu, damit andere daraus lernen können - zumal dies eine wirklich alte Frage ist, auf die es bereits unzählige positive Antworten gibt
Nico Haase