[CSS] PX to EM

[m0mo]

Hi Leute,

ich wollte kurz mal ein Thema ansprechen, was vielleicht fuer mehrere Leute interessant ist.

Seitdem ich Webseiten mache, hab ich eigentlich alles absolut angegeben - Schriftgroessen, div-Breiten usw. Nun hab ich angefangen, mich fluechtig mit diversen Themen wie CSS Druckoptimierung/Benutzerfreundlichkeit fuer Sehbehinderte usw. beschaeftigt und wollte nun von der starren px Einstellung auf die em Angaben umschwenken.

(Wer nicht weiss was gemeint ist, dass aber aendern moechte:
http://de.wikipedia.org/wiki/Em_(Schriftsatz))

Die Umrechungen sind ja dank diversen Webrechnern kein Problem - man setzt die Schriftgroesse im Body einmal fest bzgl. den 16px Standardgroesse und kann dann mit em bei anderen Elementen arbeiten.

Wie verhaelt sich das aber bei z.B. divs?
Wenn ich beispielsweise die Schriftgroesse auf 12px setze, also

12/16 = 0,75em

und ich moechte nun einen div 800px breit sein, ist er dann: 50em breit?
Und ist es ueberhaupt sinnvoll, ein relatives Mass fuer Schriftsaetze fuer andere Elemente zu nutzen?

Wie macht ihr es? Macht es ueberhaupt jemand? Welche Vorteile/Nachteile seht ihr dabei?

mfg
m0mo

 

[dms]

Wie verhaelt sich das aber bei z.B. divs?
Wenn ich beispielsweise die Schriftgroesse auf 12px setze, also

12/16 = 0,75em

und ich moechte nun einen div 800px breit sein, ist er dann: 50em breit?

Genau.

Und ist es ueberhaupt sinnvoll, ein relatives Mass fuer Schriftsaetze fuer andere Elemente zu nutzen?

Das hängt vom Layout ab. Wenn Du willst dass sich andere Elemente ebenfalls an die vom Nutzer eingestellte Schriftgrösse anpassen kannst Du auch hierbei EM-Angaben verwenden. Wenn Dein Layout es verkraften kann (und das ist zumeist der Knackpunkt) dass sich die Schrift darin ungehindert ausbreiten kann, kannst du darauf verzichten.

Wie macht ihr es? Macht es ueberhaupt jemand? Welche Vorteile/Nachteile seht ihr dabei?

2 mal hab ich es gemacht. Eine Seite ist online. Die andere wurde in mühevoller Kleinarbeit wieder auf PX umgerechnet weil es absolut nicht funktiniert hat.

Mehr dazu habe ich schon hier (ff.) geschrieben.

 

[pferdle]

Zum Thema gibt's ja verschiedene Ansätze, die immer auch mit dem zugrundeliegenden Layout-Modell zusammenhängen.

Ich bevorzuge eigentlich eine Skalierung, bei der die Seitenelemente immer in der Fensterbreite bleiben, so dass keine horizontalen Scrollbalken entstehen - optimalerweise in Kombination mit einem flexiblen Layout, das sich in einem bestimmten Bereich an die Fensterbreite anpasst.

Grundsätzlich muss man sich immer überlegen, welche Dimensionen eines Elements skaliert werden sollen. Oft kommt man nicht drum herum, einfach auszuprobieren, was in der Praxis am besten funktioniert.

Ich mache das übrigens immer so, dass ich für die Schriftgröße im body 62.5% angebe - dann muss man für die px/em-Umrechnung immer nur mit dem Faktor 10 rechnen.

 

[m0mo]

hey, danke fuer eure beiden antworten.
Was ich auch noch bemerkt habe ist die unterschiedliche Art der Skalierung vom Browser aus. Wenn ich z.B. in Firefox vergroessere, wird nicht nur die schrift groesser, sondern er zoomt sozusagen das ganze Bild - da macht es doch ueberhaupt keinen Sinn, alles in em zu machen.

ich denke ich werde die schriftgroessen auf em umstellen (da man dann mit einem befehl ja das gesamte schriftbild vergroessern/verkleinern kann) aber trotzdem weiter auf 1024x768 fix optimieren.

mfg
m0mo