CSS Maße
Für die Maßangabe werden zwei Komponenten benötigt, eine Zahl und die Maßeinheit.
Zahlen können positive und negative ganze Zahlen sein (-3, 0, 10), oder auch Kommazahlen (1.54). Achtung, Punkt statt Komma. Bei dem Wert 0 muss keine Maßeinheit angegeben werden.
Die Maßeinheiten werden in absolute und relative Maßangaben unterteilt. Ich selbst arbeite hautpsächlich mit "em", "rem" und "%", und recht selten mal mit "px" und den Viewportangaben wie "vh".
Absolute
Die Werte sind festgemeiselt, und beziehen sich nicht auf etwaige andere (Umgebungs-) Werte. Achtung, es kommt auf die Auflösung des Bildschirmes an, da alles in Pixel umgerechnet wird. Daher wird heutzutage für Webseiten fast ausschließlich mit relativen Werten gearbeitet.
- px
- Pixel, Punkte auf dem Bildschirm
- in
- Inch = 96px
- pc
- Pica = 16 Pixel
- pt
- Points = 1,33px
- cm
- Zentimeter = 37,8px
- mm
- Millimeter = 3,78px
Realtive Werte
Relative Werte haben immer eine Bezugsgröße. Im Normalfall beziehen sie sich auf das Element, indem sie sich befinden.
- em
- Bezug auf die Schriftgröße des Elternelementes. 1em entspricht der Breite des Buchstaben M.
- ex
- Wie em, statt M aber x.
- ch
- Wie em, statt M aber 0.
- rem
- Entspricht em, aber immer bezogen auf die Schriftgröße von <html>,
- %
- Prozent der Schrift, Breite oder Höhe des Elternteils.
- vw
- Prozent der Breite des Viewports (Sichtbereiches).
- vh
- Prozent der Breite des Viewports (Sichtbereiches).
- vmin
- Prozent der Breite oder Höhe des Viewports (Sichtbereiches), je nachdem was kleiner ist.
- vmax
- Prozent der Breite oder Höhe des Viewports (Sichtbereiches), je nachdem was größer ist.