Ashura: Wann em statt px?

Beitrag lesen

puts "Hallo " + gets.chomp + "."

?> Markus
=> Hallo Markus.

Richtig. Da em eine relative Einheit ist, wie % auch, hat sie entscheidende Vorteile gegenüber den statischen Einheiten wie px. Stelle dir vor, du platzierst ein <div> mittels CSS 26px unter dem oberen Browserrand, und wechselst dann deine Bildschirmauflösung, dann sitzt das div entweder höher oder tiefer als du das wolltest. Mittels relativer Einheiten kannst du das verhindern, das div wird mehr oder weniger exakt (natürlich abhängig vom Browser) dort bleiben, wo du es haben willst, und das bei jeder Bildschirmauflösung.

Tausche das Wort „Bildschirmauflösung“ gegen „Fenstergröße“ und wir kommen der Sache schon einen ganzen Schritt näher. (Obgleich auch die Fenstergröße noch kein Ausgangspunkt für den tatsächlich zur Verfügung stehenden Platz ist.)

Natürlich heißt das nicht, dass du jetzt kein px mehr verwenden solltest. In einigen Fällen ist es ratsam, denn es gibt Situationen, in denen bspw ein Strich exakt 2 px tiefer liegt als er sollte, dann kannst du natürlich margin-top:-2px; verwenden (aber natürlich ist das auch mittels em lösbar).

Wenn man sich sorgt, weil ein Strich 2 Pixel zu tief hängt, hat man das Prinzip der relativen Maßeinheiten und Dimensionen noch nicht verstanden. (Ich weiß, dass dies sicher nur ein Beispiel deinerseits war, doch das Prinzip der Unstimmigkeit bleibt.)

Dann müsste es auch eine Umrechnungstabelle für % in px geben, doch die gibt es nicht. Denn je nach Bildschirmauflösung ist ein em mehr oder weniger groß bzw. klein.

Dies stimmt aber absolut nicht. Die Maßeinheit em orientiert sich weder an Bildschirmauflösung, noch an Fenstergröße noch am zur Verfügung stehenden Platz (das tut %). Sie orientiert sich an der Vorgabeeinstellung des Useragents. Stellst du in deinem Browser also als Standardschriftgröße 16px ein, so ist 1em gleich 16px. Doch bedauernswerterweise ist dies den wenigsten Internetnutzern bekannt, sodass sie es bei der Werkseinstellung belassen, was gravierende Folgen hat.

Einen schönen Donnerstag noch.

Gruß, Ashura

--
[remote-signature:http://download.noctus.net/scripts/self_sig.php]