Sebastian: Wann em statt px?

Hallo,
ich hab mal irgendwo gelesen, dass es besser sei, in seinen ganzen css angaben kein px mehr zu verwenden, sondern nur noch em. Das man für die Schriftgröße em verwenden soll habe ich ja schon mal gehört, aber auch für sämtliche Größenangaben?

Wenn ja, wo gibt es den eine Art Umrechnunstabelle, die mir zeigt das 150px z. B. 7.6em sind, bzw. wie kann ich das umrechnen.

Was haltet Ihr davon em statt px auch als Größenangabe zu verwenden?

mfg
Sebastian

  1. Hi,

    ich hab mal irgendwo gelesen, dass es besser sei, in seinen ganzen css angaben kein px mehr zu verwenden, sondern nur noch em. Das man für die Schriftgröße em verwenden soll habe ich ja schon mal gehört, aber auch für sämtliche Größenangaben?

    wenn eine Größe von der Schrift bzw. dem Text abhängt, ist em die Einheit des Vertrauens. Bei allem anderen eher nicht.

    Wenn ja, wo gibt es den eine Art Umrechnunstabelle, die mir zeigt das 150px z. B. 7.6em sind, bzw. wie kann ich das umrechnen.

    Es ist absolut unmöglich, diese vollkommen inkompatiblen Einheiten gegeneinander umzurechnen.

    Was haltet Ihr davon em statt px auch als Größenangabe zu verwenden?

    Abstand. Sofern etwas keinen Zusammenhang zur Schrift besitzt, muss es schon gute Gründe geben, trotzdem einen von der Schriftgröße abhängigen Wert zu verwenden.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi Cheatah,

      Was haltet Ihr davon em statt px auch als Größenangabe zu verwenden?

      Abstand. Sofern etwas keinen Zusammenhang zur Schrift besitzt, muss es schon gute Gründe geben, trotzdem einen von der Schriftgröße abhängigen Wert zu verwenden.

      Wie sieht es dann aus, wenn ich z. B. in einer Navigation em Werte für die Schriftgröße verwende und die Zeilen mit width und height in px Angaben erstellt habe.
      Ist es nicht so, dass fast alles im Prinzip vom Text abhängt, ausser dort wo Grafiken verwendet werden.

      mfg
      Sebastian

      1. Hi,

        Wie sieht es dann aus, wenn ich z. B. in einer Navigation em Werte für die Schriftgröße verwende und die Zeilen mit width und height in px Angaben erstellt habe.

        beide Werte sind, insbesondere wegen ihrer augenscheinlichen Begrenzung, stark vom Text abhängig.

        Ist es nicht so, dass fast alles im Prinzip vom Text abhängt, ausser dort wo Grafiken verwendet werden.

        Klassischerweise werden z.B. Rahmen als nicht wirklich vom Text abhängig angesehen.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hallo.

          Klassischerweise werden z.B. Rahmen als nicht wirklich vom Text abhängig angesehen.

          Was auch erst bei wirklich riesiger Vergrößerung auffällt. Und wer hier dennoch em einsetzt, wird damit zu kämpfen haben, dass etwa Firefox hier unterschiedliche Vorkommen der gleichen Größe unterschiedlich interpretiert. So kann bei gleicher Einstellung 0,1em mal einem und mal zwei Pixeln entsprechen.
          MfG, at

    2. tach!

      Wenn ja, wo gibt es den eine Art Umrechnunstabelle, die mir zeigt das 150px z. B. 7.6em sind, bzw. wie kann ich das umrechnen.

      Es ist absolut unmöglich, diese vollkommen inkompatiblen Einheiten gegeneinander umzurechnen.

      Ach? Und wie macht das dann bitte Ingo?

      Gruß -
      Sebastian

      1. hi,

        Es ist absolut unmöglich, diese vollkommen inkompatiblen Einheiten gegeneinander umzurechnen.

        Ach? Und wie macht das dann bitte Ingo?

        der geht im ersten beispiel von einer absoluten font-size von 21px aus, und zeigt dann wie sich daran orinierte em-angaben in der praxis auswirken.

        und in der längeren gegenüberstellung ist auch deutlich zu lesen, dass dabei von einer im browser eingestellten default-schriftgröße von 16px ausgegangen wird.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
      2. Hi,

        Es ist absolut unmöglich, diese vollkommen inkompatiblen Einheiten gegeneinander umzurechnen.
        Ach? Und wie macht das dann bitte Ingo?

        durch Erschaffung einer Grundvoraussetzung. Er demonstriert die "Funktionsweise" der Einheit, indem er ihren Nutzen eliminiert.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi,

          Ach? Und wie macht das dann bitte Ingo?

          durch Erschaffung einer Grundvoraussetzung. Er demonstriert die "Funktionsweise" der Einheit, indem er ihren Nutzen eliminiert.

          Och nö, das ist ja nun wirklich übertrieben.
          Tatsache ist - leider! - daß nur die wenigsten User eine ihnen wirklich angenehme Schriftgröße voreingestellt haben. Schlimmer noch: sie haben die Voreinstellung (von i.d.R. halt 16px) meist gar nicht geändert und sich auch nicht dafür interessiert, wie das geht.
          Das liegt vielleicht daran, daß

          • viele Webseiten px verwenden, was sich im Mainsstream-Browser nicht ohne weiteres skalieren läßt und
          • auf den meisten Seiten Schriftgrößen unter 1em bzw. 16px für Fließtext definiert sind.

          Ich hätte absolut nichts dagegen, als Basis 1em zu verwenden. Nur leider würde das von der Mehrzahl der Besucher in Unkenntnis der Umstände vermutlich als zu groß empfunden werden.
          Und bevor ich nun die (angenommen gewünschte) Schriftgröße in px angebe, wähle ich lieber einen entsprechenden em-Wert, der bei den meisten Besuchern (und in verschiedenen Browsern bei Defaulteinstellung getestet) die "übliche" Schriftgröße ergibt.

          Natürlich ist mir klar, daß das nicht ganz unproblematisch ist:

          • Verfechter von 1em mißfällt dies; sie müßten den Schriftgrad heraufsetzen, sofern sie Änderungen nicht ohnehin ausreichend vorgebeugt haben.
          • IE-User, die versehentlich den Schriftgrad geändert haben, müßten sich mit dieser Funktion auseinandersetzen.
          • Die (doch relativ wenigen) User, die ihre Defaultschriftgröße bewußt unter 16px gesetzt haben, müßten ihren Schriftgrad ebenfalls heraufsetzen.

          freundliche Grüße
          Ingo

  2. Hallo Freunde des gehobenen Forumsgenußes,

    ich hab mal irgendwo gelesen, dass es besser sei, in seinen ganzen css angaben kein px mehr zu verwenden, sondern nur noch em. Das man für die Schriftgröße em verwenden soll habe ich ja schon mal gehört, aber auch für sämtliche Größenangaben?

    Ja, es ist auch für alle anderen Größenangaben sinnvoll, dann wird beim Erhöhen der Schriftgröße
    die ganze Seite skaliert (mal abgesehen von Bildern), wenn man z.B. die Breite eines Menüs in em
    angibt wächst der Text nicht über den Rand hinaus.

    Wenn ja, wo gibt es den eine Art Umrechnunstabelle, die mir zeigt das 150px z. B. 7.6em sind, bzw. wie kann ich das umrechnen.

    Die kann es nicht geben, das ändert sich doch sofort beim Skalieren einer Seite und verschiedene User
    haben verschiedene Schriftgrößen voreingestellt (ich bevorzuge als Mindest-Schriftgröße z.B.
    24 in meinem Firefox).

    Gruß
    Alexander Brock

    --
    Ceterum censeo Carthaginem esse delendam
    1. Heißa, Alexander,

      ich bevorzuge als Mindest-Schriftgröße z.B. 24 in meinem Firefox.

      Ich schätze mal, dass das Pixel sein sollen. Hm, also entweder du hast extrem schlechte Augen oder du hast eine extrem hohe Bildschirmauflösung. ;-) Welches von beiden trifft zu?

      Also bei mir ist die bevorzugte Schriftgröße auf 11px festgelegt, die Minimalgröße liegt bei 8px.

      Gautera!
      Grüße aus Biberach Riss,
      Candid Dauth

      --
      „Jemanden zu lieben bedeutet, ihn nicht zu erdrücken, auch wenn man es gerne wollte – aus Liebe.“ | Mein SelfCode
      http://cdauth.de/
      1. Hallo Freunde des gehobenen Forumsgenußes,

        Ich schätze mal, dass das Pixel sein sollen. Hm, also entweder du hast extrem schlechte Augen oder du hast eine extrem hohe Bildschirmauflösung. ;-) Welches von beiden trifft zu?

        Ich habe einen 21-Zoll Röhrenmonitor, der 1m von meinen Augen entfernt ist und eine Auflösung von 1600x1200px

        Gruß
        Alexander Brock

        --
        [latex]\lim_{3 \to 4}{\sqrt{3}} = 2[/latex]
  3. Hi

    ich hab mal irgendwo gelesen, dass es besser sei, in seinen ganzen css angaben kein px mehr zu verwenden, sondern nur noch em. Das man für die Schriftgröße em verwenden soll habe ich ja schon mal gehört, aber auch für sämtliche Größenangaben?

    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.

    Du kannst also mittels relativer Einheiten deine Seite für die verschiedensten Auflösungen optimieren.

    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 ja, wo gibt es den eine Art Umrechnunstabelle, die mir zeigt das 150px z. B. 7.6em sind, bzw. wie kann ich das umrechnen.

    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.

    Was haltet Ihr davon em statt px auch als Größenangabe zu verwenden?

    Willst du, dass deine Seite nur von Usern mit einer 1024x786 anzusehen ist? Nein? Dann nimm % oder em.

    cu
    Markus Z.

    1. 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]
      1. hi,

        Die Maßeinheit em orientiert sich weder an Bildschirmauflösung, noch an Fenstergröße noch am zur Verfügung stehenden Platz (das tut %).

        bei font-size bezieht sich % ebenfalls nicht "auf den zur verfügung stehenden platz".
        sonst wären die buchstaben bei font-size:100.01% ja so hoch wie der viewport ...

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. puts "Hallo " + gets.chomp + "."

          ?> wahsaga
          => Hallo wahsaga.

          Die Maßeinheit em orientiert sich weder an Bildschirmauflösung, noch an Fenstergröße noch am zur Verfügung stehenden Platz (das tut %).

          bei font-size bezieht sich % ebenfalls nicht "auf den zur verfügung stehenden platz".
          sonst wären die buchstaben bei font-size:100.01% ja so hoch wie der viewport ...

          Aye. Stimmt.

          Einen schönen Donnerstag noch.

          Gruß, Ashura

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

      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.

      Nein. Ich bin mir sehr sicher, dass sich das DIV dann auch noch 26px unter dem oberen Browserrand befindet - also genau dort, wo es hin soll.

      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.

      Du meinst, das DIV würde mit relativen Einheiten im Verhältnis so angeordnet bleiben.

      Ist nur die Frage, ob man das immer und überall auch so haben will.

      Du kannst also mittels relativer Einheiten deine Seite für die verschiedensten Auflösungen optimieren.

      Don't use the word "optimieren"! Just... don't!

      Was haltet Ihr davon em statt px auch als Größenangabe zu verwenden?

      Willst du, dass deine Seite nur von Usern mit einer 1024x786 anzusehen ist? Nein? Dann nimm % oder em.

      Diese Generalaussage ist falsch. Die Verwendung der Maßeinheit px ist weder moralisch verwerflich, noch engt sie per se die gestaltete Website auf irgendeine feste Bildschirmauflösung ein.

      Im Gegenteil: Außer der Formatierung mittels CSS steht dem Webseitengestalter nur noch die Einbindung von Pixelgrafiken zur Verfügung. Diese aber kann man eben gerade NICHT problemlos skalieren und in em-Einheiten oder Prozenten den allgemeinen Größenverhältnissen anpassen, ohne dass man in den meisten Fällen ziemlich eklige Pixeldarstellungen erhält. Hintergrundgrafiken sind gar nicht skalierbar - aber unstrittig einer der wichtigsten Gestaltungsmechanismen, vgl. CSSZengarden.

      Insofern ist die Verwendung von px erstens absolut legitim, zweitens angesichts der Pixelmaße der Bilder auch absolut zielführend, und drittens bei vernünftigen Browsern auch hinsichtlich der Schriftgröße kein Problem: Opera skaliert Schrift UND Grafiken anhand des gewählten Faktors einfach mit, so dass gerade deshalb die Größenverhältnisse korrekt erhalten bleiben.

      Denn wenn das mit em-Einheiten so wunderbar klappen würde, dann muß mir mal jemand erklären, wie es funktionieren soll, 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? Na, Vorschläge?

      • Sven Rautenberg
      1. Hi,

        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.

        freundliche Grüße
        Ingo

        1. 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
          1. Hi,

            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!

            Nein. Bei gleicher Monitorgröße nimmt ein Pixel natürlich wesentlich mehr Platz ein, weshalb die Schrift ja auch optisch viel größer erscheint. Lediglich der Anzeigebereich ist stark reduziert, so daß je nach Definition der Seite eben alles gedrängt ist oder Scrollbalken generiert werden.

            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 ginge aber nicht ohne weiteres, jedenfalls nicht auf Autorenseite. Dir schwebt vielleicht eine Konstruktion mit Breitenangaben in em vor, die es dem User ermöglichen, durch Verringerung des Schriftgrades die Seite gleich aussehen zu lassen. In diesem Fall wird aufgrund der geringeren Auflösung natürlich auch die Schrift pixeliger.

            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.

            Es wird wohl kaum jemand auf eine solche Idee kommen. Die Regel ist doch, entweder eine feste Breite in px oder em vorzugeben, die dann in sehr kleinen Bildschirmen nicht mehr paßt und Scrollbalken hervorruft, oder Die Breite nicht bzw. in % vorzugeben, wodurch die Inhalte in kleinen Fenstern sehr gedrängt werden.

            Und noch ein Nachteil von em sollte erwähnt werden: Es ist eine relative Einheit, die sich prima vererbt.

            Das läßt sich aber in den meisten Fällen relativ einfach kompensieren, z.B. indem man verschachtelbaren Elementen keine Schriftgröße zuweist, sondern z.B. nur P und Hx.
            Aber auch bei verschachtelten Elementen ist dieser "Nachteil" leicht zu beheben, z.B.:
            li { font-size: 0.9em}
            li li { font-size:1em; }

            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.

            Zugegeben. Aber dafür kann px weit größere Probleme verursachen, sofern der Browser hier eine Skalierung zuläßt. Denke nur an die (jetzt schon länger nicht mehr gekommenen) Hilferufe: "wie kann ich eine Veränderung der Schriftgröße verhindern, damit mein Layout nicht auseinanderfällt".

            freundliche Grüße
            Ingo

          2. Hallo.

            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.

            Es ist nicht nur illusorisch, das anzunehmen, sondern vor allem idiotisch, es zu fordern.
            MfG, at

      2. HAllo,

        und drittens bei vernünftigen Browsern auch hinsichtlich der Schriftgröße kein Problem (...)

        Das entkräftet das faktische Argument für den Einsatz von em nicht, nämlich dass Opera die Ausnahme ist, die die Regel »Nicht-Skalierbarkeit« bestätigt. Wenn alle Browser so handeln würden, *dann* könnte man mit den Argumenten kommen, die du für gewöhnlich vorbringst. Bis dahin aber muss die Diskussion von ganz anderen Voraussetzungen ausgehen.

        Denn wenn das mit em-Einheiten so wunderbar klappen würde, dann muß mir mal jemand erklären, wie es funktionieren soll, 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

        Richtig, das Herunterskalieren der gesamten Seite mit bleibenden Verhältnissen, etwa wie bei Vektorformaten, ist schwer möglich, ganz unabhängig von der Einheit. Deshalb kann em höchstens ein Stein sein, auf dem eine anpassungsfähige Seite baut.
        Alle Beiträge des CSS Zen Garden sollen z.B. bis zu 150% hochskalierbar sein (im Gecko!). Pustekuchen, die meisten Designs fallen bei jeder kleinsten Schriftgrößenänderung auseinander - sie arbeiten eben pixelgenau. Natürlich ist px bei dermaßen elaboriertem Einsatz von Pixelgrafiken das einzig angemessene. Darüber braucht man nicht streiten, es hat aber auch wenig Erkenntniswert, denn was du zu erwähnen vergaßt: Trotzdem muss man sich vor Augen führen, dass in diesen Fällen auf Skalierbarkeit auf gut Deutsch gesagt geschissen wird, die Designs faktisch für Auflösungen »optimiert« sind und selbst im Opera selten vergrößerbar sind, da dort zwar alles größer wird, die Breite aber gleich bleibt, wodurch Spalten zu schmal werden usw. Daher ist der CSS Zen Garden ein gutes Beispiel dafür, wohin das sorgenbefreite »px ist ohne Zweifel die richtige Einheit für solche Fälle« führt: Anpassungsfähigkeit kann man vergessen bzw. sie besteht nur noch in der ultima ratio, dass der Benutzer das Stylesheet abschalten kann.

        Mathias

        1. Daher ist der CSS Zen Garden ein gutes Beispiel dafür, wohin das sorgenbefreite »px ist ohne Zweifel die richtige Einheit für solche Fälle« führt: Anpassungsfähigkeit kann man vergessen bzw. sie besteht nur noch in der ultima ratio, dass der Benutzer das Stylesheet abschalten kann.

          Was ich damit sagen wollte:
          Man kann sich verschiedene Gedanken machen, durch die man Gründe findet, px einzusetzen. »Designerische Notwendigkeit beim Einsatz von Pixelgrafiken« ist ein Grund. Verschachtelung und Relativität sind manchmal auch Gründe. Das ist aber ein geschlossener Diskurs für sich. Er hat keinerlei Überschneidungen mit dem Thema »Anpassungsfähigkeit und Skalierbarkeit von Webseiten«, das den Diskurs um em prägt. Daher kann px nicht em schlagen und em nicht px. Ein Vergleich ist widersinnig, wenn es keinen Bezugspunkt gibt, keine Hinsicht, in der verlichen wird. Festzustellen, dass manches Design nur mit px funktioniert, und daraus einen Vorzug abzuleiten, sticht die em-eigene Logik nicht. Festzustellen, dass Schriftskalierung mit em vorteilhafter ist, sticht die px-eigene Logik nicht. Die Frage »em oder px« ist sinnlos, die Frage lautet »Was ist eine anpassungsfähige Webseite«. Oder eben »was ist ein konsistentes Layout bei Mischung von Text und Pixelgrafik«. Man kann weder behaupten, eine Seite nach dem px-Konzept sei in Bezug auf die Schriftgröße anpassungsfähig (was em zumindest faktisch auch nicht zufriedenstellend kann), noch dass eine Seite nach dem em-Konzept ein sicheres Verhältnis zwischen Pixelgrafik und Text bietet (was px zumindest faktisch auch nicht zufriedenstellend kann).

          Mathias