Frage zu CSS Angaben em, px und %

[Kossy]

Guten Tag zusammen !

Ich stoße in meinem CSS Desihn imme riweder an den Punkt, wo ich mich entschiden muss, ob ich nun in Bezug auf Größenangaben die CSS Eigenschaften px, em oder Prozent nehemn muss. Ich entscheide mich da meistens intuitiv für eine Angabe in px.

Aber wann genau lohnt sich eine Angabe in em oder Prozenz bzw. wann ist sie sogar u.U. unerlässlich?

 

[mikdoe]

em habe ich schon mal in Verbindung mit responsive Webdesign gelesen, also für sämtliche Anzeigegeräte taugliche Darstellung. Kann es dir aber nicht konkreter sagen, weil ich da nicht so tief drin bin. Kannste aber bestimmt mal googeln.
Und % benutze ich halt, wenn es wirklich von der Anzeigegröße abhängig sein soll oder bei Spaltenbreiten in Tabellen (z.B. width:20% bei 5 Spalten oder so).
Ansonsten benutze ich im Momen auch überall px.

 

[rico2009]

em ist eine ziemlich genaue Angabe für z.B. Schriftgrößen, die wie mikdoe schon sagte von allen Geräten verstanden wird. Sowohl em, % als auch px kann man für Responsive Webdesign verwenden. Wenn auf allen Geräten die gleiche Seite dargestellt werden soll, musst du sowieso mit Media-Querys arbeiten.

Zu dem Thema gibt es einen guten Artikel bei t3n: Responsive Webdesign mit HTML5 und CSS3 – Grundlagen » t3n

Für den Alltagsgebrauch nehme ich bisher auch px.

 

[j-l-n]

em ist eine ziemlich genaue Angabe für z.B. Schriftgrößen, die wie mikdoe schon sagte von allen Geräten verstanden wird.

em ist meines Wissens proportional zur Schriftgröße und gibt das Verhältnis zur standardmäßig im Browser eingestellten an. Ist also die normale Größe für eine <h1>-Überschrift 20px, und ich gebe 1.5em an, wird sie in Größe (1,5*20px)=30px dargestellt.


PS: nicht zu vergessen sind natürlich auch cm, mm, in & pt...

 

[Stewie]

1 em ist immer 100% der Schriftgröße welche im selben CSS Container formatiert ist.

Beispiel:

font-size: 18pt;

Also entspricht 1 em = 18pt = 100%.

Ich persönlich benutze es nur bei:

line-height

.

 

[kkapsner]

1em ist nicht immer gleich 100%. Die Referenz für die Prozentangabe kann bei verschiedenen CSS-Eigenschaften unterschiedlich sein. Bei height ist es z.B. die Höhe des offsetParents.