Moin!

ich stimme Dir zwar zu, aber was hat hier:

dass man beispielsweise auf 1024er-Auflösung die Größenverhältnisse und eine vielleicht 12 Pixel ergebende Schriftgröße (in em angegeben) erstellt hat, und dieselben Größenverhältnisse dann bei 640*480 sehen will - wer wird dann noch die Schrift lesen können, welche mit 7,5 Pixeln Größe gerendert würde?
die Monitorauflösung mit der Schriftgröße zu tun? Bzw. wieso sollten 0.75em bei gleicher Browsereinstellung von 16px und kleinerer Auflösung kleiner dargestellt werden? Das Gegenteil ist der Fall: jedes Pixel wird bei kleinerer Auflösung größer dargestellt.

Die Einheit "em" wurde doch als "da bleibt die Darstellung identisch bei unterschiedlichen Auflösungen" verkauft (zumindest von Markus Z.).

Und du hast Recht: Das ist nicht wirklich korrekt.

Angenommen, man zeigt mit seinem Browser einmal bei 1024 und dann bei 640 Pixeln Auflösung die Webseite an und stellt nichts um, dann wird logischerweise die 640er-Auflösung optisch auf dem Bildschirm wesentlich größer erscheinen - und gleichzeitig wird die Darstellung der Webseite ziemlich gedrängt erscheinen, weil ja wesentlich weniger Platz zur Verfügung steht. An der Grundlage, wieviele Pixel denn jetzt 1em sind, wurde ja nichts verändert, also sind sämtliche Elemente der Seite bei beiden Auflösungen exakt gleich groß - in Pixeln!

Genau dasselbe Ergebnis habe ich, wenn ich Pixel als Einheit verwende, auch.

Wenn man jetzt die Grundlage für die em-Einheit anpaßt, damit die Webseite bei 640 genauso auf den Bildschirm paßt, wie bei 1024, muß man die Größe herunterschrauben. Das bedeutet aber, dass eine Schriftart, die bei 1024 mit 12 Pixel Anzeigegröße noch recht gut zu lesen war, jetzt mit (rechnerischen) 7,5 Pixeln Größe in den kritischen Bereich der Darstellungspixeligkeit kommt. Sie nimmt zwar weiterhin die gleiche optische Höhe ein, sieht aber wesentlich pixeliger aus. Noch extremer wäre es, wenn man die gleiche Website auf einem Handheld mit nur 320*240 Pixeln Auflösung darstellen wollte - da würde mit dieser Methode dann 3,25 Pixel Schriftgröße rauskommen, und die kann garantiert keiner mehr lesen.

Es ist also illusorisch anzunehmen, mit em hätte man plötzlich keinerlei Probleme mehr, und die Webseite sähe auf allen Bildschirmen gleich aus, egal welche Auflösung. Denn wo höhere Auflösungen ausreichend "Pixel pro em" bieten, um auch feinere Schriftdetails anzuzeigen, wirds bei niedrigen Auflösungen unter Umständen unleserlich pixelig, so dass man am Verhältnis "Pixel pro em" drehen muß. Dann aber ändert sich wiederum die Aufteilung der Website im Verhältnis zum Browserfenster.

Und noch ein Nachteil von em sollte erwähnt werden: Es ist eine relative Einheit, die sich prima vererbt. Mit Pixeln kann ich die Schriftgröße einer Aufzählungsliste mit li {font-size:12px;} einstellen und dann in den Seiten ohne Nachdenken einfach Listen in Listen verschachteln. Nutze ich dagegen em mit anderen Werten als 1, wird die Schrift mit jeder Schachtelstufe immer kleiner oder größer. Ich muß also extra dafür noch eine weitere Regel definieren - wenn es mir denn tatsächlich direkt auffällt. Wenn später jemand Inhalte einfügt, wird er sich vermutlich einfach nur wundern.

Und noch ein Nachteil von em existiert: Es ist keine feste, verläßlich große Einheit, sondern immer von der aktuellen, vor Ort gültigen Schriftgröße abhängig. Das ist einerseits ganz nett, wenn man Elemente in Abhängigkeit von der lokalen Schriftgröße formatieren möchte, es ist andererseits aber ziemlich ärgerlich, wenn man mit unterschiedlichen Schriftgrößen zu kämpfen hat:

Angenommen, der body soll einen linken Rand von 1em erhalten, aber ein spezielles Element soll trotzdem komplett am linken Bildschirmrand anfangen, hat aber eine andere Schriftgröße.

Mit Pixeln würde ich einen negativen Margin festlegen, der genau dem des body entspricht. Mit em gibts da Probleme, denn ein margin-left:-1em im Element wirkt nur dann dem margin-left:1em des body passend entgegen, wenn an der Schriftgröße nichts verändert wurde.

  
body {  
  font-size:1em;  
  margin:0;  
  padding:0;  
  margin-left:1em; /* das ist der Rand, um den es geht */  
  background-color:green;  
}  
#b1 {  
  font-size:1em;  
  margin-left:-1em; /* hier soll der Rand wieder aufgehoben werden */  
  background-color:red;  
  border:1px solid white; /* zur Kontrolle: Der Rand muss exakt passen */  
}  

  
<body>  
<div id="b1">  
Lalala lalala Lalala lalala Lalala lalala  
</div>  
</body>  

Mit diesen Definitionen paßt noch alles. Ändere ich aber in #b1 die Schriftgröße, wird es komplizierter. Und es drohen durchaus Rundungsfehler.

Für die korrekte Berechnung des Randes bei Elementen, die über mehrere Stufen hinweg veränderte Schriftgrößen erhalten, sollte man dann einen guten Taschenrechner bereithalten... :)

• Sven Rautenberg