Veröffentlicht am Schreib einen Kommentar

EM vs. REM vs. PX – Warum Sie nicht einfach Pixel verwenden sollten“

Die Debatte wurde schon oft geführt – welche Maßeinheiten sollten wir in unserem CSS verwenden?

Wir waren, wie viele andere auch, bereit, die REMs wegzuwerfen und zum geliebten Pixel zurückzukehren. Dabei haben wir aus den Augen verloren, warum wir uns überhaupt für die Verwendung von REMs entschieden haben. Das Problem dreht sich nicht nur um die Schriftgröße, sondern auch um die Zugänglichkeit.

TL;DR:

  • Pixel sind ignorant, verwenden Sie sie nicht.
  • Verwenden Sie REMs für Größen und Abstände.
  • Verwenden Sie EMs für Medienabfragen.

Pixel

Pixel (px) sind das, woran wir uns alle im Laufe der Jahre gewöhnt haben. Jeder weiß, was ein Pixel ist (obwohl die Größe eines Pixels nicht immer gleich ist, aber das ist ein anderes Thema). Jeder ist mit der Verwendung von Pixeln vertraut. Sie sind leicht zu übersetzen. Designer arbeiten in der Regel in Pixeln, so dass es einfach ist, Größen direkt aus Photoshop in die Erstellung zu übernehmen.

Was ist also falsch an Pixeln?

Barrierefreiheit

Ich bin ein großer Verfechter der Barrierefreiheit im Web. Ich würde Zugänglichkeit jederzeit über „hübsch“ stellen.

Wenn man alle Schriftgrößen, Elementgrößen und Abstände in Pixeln festlegt, behandelt man den Endbenutzer nicht mit Respekt.

In den meisten Browsern kann der Benutzer die Standard-Schriftgröße des Browsers auf eine andere Größe als die Standardgröße (normalerweise 16px) einstellen. Wenn der Benutzer die Standardgröße auf 20px einstellt, sollten alle Schriftgrößen entsprechend skaliert werden.

Wenn die Website die Schriftgrößen jedoch explizit in Pixeln festlegt, wird eine Überschrift, die auf 30px eingestellt ist, immer 30px groß sein. Das mag aus der Sicht eines Designers/Entwicklers großartig klingen – aber Sie sind nicht der Nutzer, hören Sie auf, Websites für sich selbst zu erstellen.

Glücklicherweise wird die Zugänglichkeit durch die Angabe der Schriftgröße in Pixeln nicht völlig zunichte gemacht. Der Benutzer kann immer noch mit Strg plus +/- (cmd anstelle von Strg unter OS X) zoomen. Aber es geht noch besser.

REMs

Wenn Sie in irgendeiner Weise mit der Welt des Webdesigns vertraut sind, haben Sie zweifellos schon von REMs gehört. Falls nicht, sind REMs eine Möglichkeit, die Schriftgröße auf der Grundlage der Schriftgröße des HTML-Stammelements festzulegen. Sie ermöglichen es Ihnen auch, ein ganzes Projekt schnell zu skalieren, indem Sie die Schriftgröße des Root-Elements ändern (z. B. bei einer bestimmten Medienabfrage/Bildschirmgröße).

Die Einheit „REM“ stellt die Schriftgröße des Root-Elements dar (z. B. die Schriftgröße des <html>Elements).

Wie berechnet man PX aus REM

Ein einfaches und gängiges Beispiel: html font-size ist auf 10px gesetzt, paragraph ist auf 1.6rem gesetzt – 1.6rem * 10px = 16px.

Die Einstellung einer root font-size von 10px ist das häufigste Szenario, wenn ich Leute sehe, die REMs verwenden. Es ermöglicht eine schnelle Umwandlung von Pixelwerten in REM-Werte, indem die Zahl einfach durch 10 geteilt wird.

Doch die Einstellung der Basisschriftgröße in Pixeln hat immer noch das gleiche Problem wie das obige Pixelbeispiel. Zugänglichkeit wird außer Kraft gesetzt.

Während REMs sicherlich ihren Nutzen haben, bin ich bereit zu wetten, dass die meisten Leute REMs verwenden, weil sie als cooler als Pixel angesehen werden. Ich habe selten ein Projekt gesehen, bei dem jemand die HTML-Schriftgröße in Abhängigkeit von der Bildschirmgröße ändert, und das zu Recht. Es sei denn, Sie haben ein sehr typografisches Design, dann ist es unwahrscheinlich, dass Sie alles auf einmal skalieren wollen.

Wie können wir also unseren Zugänglichkeits-Fauxpas beheben?

Setzen Sie die HTML-Stammschriftgröße als Prozentsatz. Das ist ein Prozentsatz der Standard-Schriftgröße des Browsers des Benutzers. Eine typische Methode ist, die HTML-Schriftgröße auf 62,5 % zu setzen. Das liegt daran, dass 62,5 % von 16 px (typische Standardschriftgröße des Browsers) 10 px sind. Das würde immer noch 1,6rem = 16px ergeben. Das bedeutet nun, dass, wenn die Standard-Schriftgröße des Browsers des Benutzers z. B. auf 20px geändert wird, 1,6rem nun 20px entsprechen würde. Wenn Ihr Benutzer also größere Schriftarten wünscht, lassen Sie ihn. Glücklicher Designer. Glücklicher Entwickler. Alle Zahlen sind immer noch einfach zu handhaben.

Das ideale Szenario wäre, die HTML-Schriftgröße bei 100% zu belassen, aber das macht die Berechnungen etwas schwieriger. Zum Beispiel ist 16px jetzt 1rem, 20px ist 1.25rem, 24px ist 1.5rem usw.

Sass/SCSS zur Rettung

Alle diese Zahlen im Kopf auszurechnen wäre ziemlich zeitraubend. Wenn Sie Sass/SCSS, LESS oder einen anderen CSS-Präprozessor verwenden, müssen Sie sich zum Glück keine Sorgen machen. Sie können Funktionen verwenden, um diese Dinge für Sie zu berechnen.

Was ist mit EMs?

EMs funktionieren zunächst ähnlich wie REMs, bis es zur Verschachtelung kommt. Ich war noch nie ein Fan von EMs, vor allem wenn es um Schriftgrößen geht. Nehmen Sie zum Beispiel ein div mit einer Schriftgröße von 2em und fügen Sie dann einen Absatz mit einer Schriftgröße von 2em hinzu. Die Schriftgröße dieses Absatzes beträgt nun 2em relativ zum div. Ich verliere schnell den Überblick über die Mathematik und welche Größe was ist, und es wird schnell unüberschaubar. Genau das lösen REMs – die Größe bezieht sich immer auf die Wurzel.

Was ist mit Media Queries?

Wir haben also festgestellt, dass die Verwendung von Pixelwerten die Standardeinstellungen des Browsers außer Kraft setzt, also ist es am besten, einfach alle Pixelgrößen in REMs zu konvertieren, oder? Nicht ganz.

In diesem Blogbeitrag werden einige der wichtigsten Unterschiede zwischen der Verwendung von Pixeln, EMs und REMs in Media Queries (https://zellwk.com/blog/media-query-units/) hervorgehoben. Lesen Sie ihn und kommen Sie wieder.

Zusammenfassend lässt sich sagen, dass sowohl Pixel als auch REMs für Media Queries in verschiedenen Browsern versagen, wenn der Browser-Zoom verwendet wird, und dass EMs die beste Option sind, die wir haben. REMs versagen an dieser Stelle viel häufiger als Pixel, so dass wir sie komplett außer Acht lassen werden.

Es wird allerdings noch ein bisschen komplizierter. Sowohl EMs als auch Pixel haben ihre Tücken bei Medienabfragen, wenn es um den Unterschied einer Dezimalstelle dieser Einheit geht. Wenn Sie zufällig sowohl die minimale als auch die maximale Breite von Media Queries im selben Codeblock verwenden, werden Sie eine schlechte Zeit haben, sobald der Benutzer beginnt, seinen Browserzoom oder die Standardschriftgröße zu ändern.

Hier sind einige Beispiele:

Wir verwenden 6 Dezimalstellen, weil bestimmte Browser keinen Unterschied zwischen 2-5.d.p.

Zur Verdeutlichung verwenden wir eine Schriftgröße von 10px auf dem Körper, um die Mathematik ein wenig klarer zu machen.

Beispiel 1: Browser-Zoom auf 100%, Browser-Breite auf 640px

min-width: 64em = Hitmax-width: 63.99em = Missmax-width: 63.999999em = Hitmin-width: 640px = Hitmax-width: 639px = Missmax-width: 639.999999px = Miss

Beispiel 1b: Browser-Zoom auf 100%, Browser-Breite auf 639px

min-width: 64em = Missmax-width: 63.99em = Hitmax-width: 63.999999em = Hitmin-width: 640px = Missmax-width: 639px = Hitmax-width: 639.999999px = Hit

So können wir 6dp nicht für EMs verwenden, weil es beide Media-Queries trifft.

Beispiel 2: Browser-Zoom auf 110% eingestellt, Browser-Breite auf 704px (weil 640px * 110% = 704px)

min-width: 64em = Missmax-width: 63.99em = Missmax-width: 63.999999em = Hitmin-width: 640px = Missmax-width: 639px = Missmax-width: 639.999999px = Hit

Beispiel 2b: Browser-Zoom auf 110% eingestellt, Browser-Breite auf 705px

min-width: 64em = Hitmax-width: 63.99em = Missmax-width: 63.999999em = Missmin-width: 640px = Hitmax-width: 639px = Missmax-width: 639.999999px = Miss

So können wir 2dp nicht für EMs verwenden. Alles, was uns in diesem Stadium bleibt, sind 6dp-Pixel. Das funktioniert mit dem Browser-Zoom. Allerdings…

Beispiel 3: Browser-Zoom auf 100%, Browser-Schriftgröße auf 20px, Browser-Breite auf 800 (weil 640 * 125% = 800)

min-width: 64em = Hitmax-width: 63.99em = Missmax-width: 63.999999em = Hit

Also sind 6dp EMs immer noch nicht möglich. Und wir können überhaupt keine Pixel für Media Queries verwenden, weil sie immer noch bei 640px/639px feuern, weil sie EMs/REMs ignorieren.

Was ist also die Lösung?

Unglücklicherweise gibt es keine Antwort. Bis die Browser die Rundungsprobleme gelöst haben, sitzen wir ein wenig fest.

Die einfachste akzeptable Option ist, dass wir niemals eine minimale und eine maximale Breite im selben Block überlappen lassen. Beispiel:

body { @media screen and (max-width: 63.99em) { background: blue; } @media screen and (min-width: 64em) { background: blue; }}

Das Problem bei der obigen Lösung ist, dass es bestimmte Szenarien gibt, in denen beide Media-Queries getroffen werden oder beide ignoriert werden. Am sichersten wäre es also, etwas zu schreiben wie:

body { background: blue; @media screen and (min-width: 64em) { background: blue; }}

Warum gibt es keine echte Lösung? Ich glaube nicht, dass es genug Leute interessiert. Jede Statistik, die besagt, dass die Leute ihre Standardschriftgröße im Browser nicht ändern, ist definitiv verzerrt. Die Optionen in Chrome, um die Standard-Schriftgröße zu ändern, sind jetzt sehr tief in den erweiterten Browseroptionen vergraben.

Fallen

Es gibt einige Fallstricke bei diesem Ansatz:

  • Wenn Sie es gewohnt sind, sowohl min-width als auch max-width media queries im selben Codeblock zu schreiben, wird es länger dauern.
  • Es erhöht die Komplexität, da Sie CSS in die eine oder andere Richtung überschreiben müssen, anstatt dem Browser zu sagen, dass er Option A oder B verwenden soll.
  • Durch diese Überschreibungen erhöht sich die Dateigröße. Nicht viel, aber es ist eine Überlegung wert.

Abhängig vom Projekt, dem Entwickler und verschiedenen anderen Faktoren, wie z.B. dem Projektbudget (wir müssen hier realistisch sein), könnten Pixel einfacher und schneller sein. Es könnte auch einfacher und schneller sein, die Barrierefreiheit zu ignorieren.

Denken Sie daran, für wen Sie Websites entwickeln.

Es ist auch erwähnenswert, dass dieser Blog-Beitrag zum Zeitpunkt der Abfassung aktuell ist, aber mit den ständigen Aktualisierungen der Funktionsweise von Browsern könnte dieses Problem der Vergangenheit angehören.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.