Absolute Maßangeben geben die Abmessungen in der definierten Weise wieder, unabhängig von anderen Maßangaben. Fürs Screendesign sind sie weniger geeignet, da das Ausgabemedium meist nicht bekannt ist.
Absolute Maßangeben sind nur zu empfehlen, wenn die Abmessungen des Ausgabegeräts genau bekannt sind, zum Beispiel DIN A4 beim Drucken.
| Einheit | Beschreibung | Benutzt für |
|---|---|---|
| cm | Zentimeter | - |
| mm | Millimeter | - |
| in | Inch (1in = 96px = 2.54 cm) | - |
| px | Pixel (1px = 1/96 von 1 inch). Anmerkung: Je nach Ausgabegerät kann ein Pixel auch mehrere technische Pixel des Ausgabegeräts umfassen. | - |
| pt | Punkt (1pt = 1/72 von 1 inch) | - |
Relative Maßangaben geben ein Maß bezüglich einer anderen Maßangabe an. Sie sind das Mittel der Wahl für das Screendesign.
| Einheit | Beschreibung | Benutzt für |
|---|---|---|
| em | Relativ zur Schriftgröße des aktuellen Elements | Skalierbare Layouts |
| ex | Relativ zur Höhe des kleinen "x" der aktuellen Schriftart | sehr selten |
| rem | Relativ zur Schriftgröße des Root-Elements (<html>) | Skalierbare Layouts |
| vw | Relativ zur Breite des Viewports (vw = viewport width). Beispiel: Bei 100cm Breite des Browserfensters ist 1vw gleich 1cm | Skalierbare, responsive Layouts |
| vh | Relativ zur Höhe des Viewports (vh = viewport height) | Skalierbare, responsive Layouts |
| % | Relativ zur entpsprechneden Maßangabe des übergordneten Elements | Skalierbare Layouts |
Übergeordnetes Element
background-color: #f00 oder #ff0000
background-color: rgb(50,50,200);
background-color: cornflowerblue;
background-color: rgba(50,50,200, 0.3);
Dieser Text ist in einer automatisch skalierenden Schriftgöße, in Viewport-Einheiten, ausgezeichnet.
Es war einmal eine alte Geiß, die hatte sieben junge Geißlein, und hatte sie lieb, wie eine Mutter ihre Kinder lieb hat. Eines Tages wollte sie in den Wald gehen und Futter holen, da rief sie alle sieben herbei und sprach »liebe Kinder, ich will hinaus in den Wald, seid auf eurer Hut vor dem Wolf, wenn er hereinkommt, so frißt er euch alle mit Haut und Haar. Der Bösewicht verstellt sich oft, aber an seiner rauhen Stimme und an seinen schwarzen Füßen werdet ihr ihn gleich erkennen.« Die Geißlein sagten »liebe Mutter, wir wollen uns schon in acht nehmen, Ihr könnt ohne Sorge fortgehen.« Da meckerte die Alte und machte sich getrost auf den Weg.
Dieser Text ist in einer klassischen Schriftgöße, in Pixel-Einheiten, ausgezeichnet.
Es dauerte nicht lange, so klopfte jemand an die Haustür und rief »macht auf, ihr lieben Kinder, eure Mutter ist da und hat jedem von euch etwas mitgebracht.« Aber die Geißerchen hörten an der rauhen Stimme, daß es der Wolf war, »wir machen nicht auf,« riefen sie, »du bist unsere Mutter nicht, die hat eine feine und liebliche Stimme, aber deine Stimme ist rauh; du bist der Wolf.« Da ging der Wolf fort zu einem Krämer und kaufte sich ein großes Stück Kreide: die aß er und machte damit seine Stimme fein. Dann kam er zurück, klopfte an die Haustür und rief »macht auf, ihr lieben Kinder, eure Mutter ist da und hat jedem von euch etwas mitgebracht.« Aber der Wolf hatte seine schwarze Pfote in das Fenster gelegt, das sahen die Kinder und riefen »wir machen nicht auf, unsere Mutter hat keinen schwarzen Fuß wie du: du bist der Wolf.« Da lief der Wolf zu einem Bäcker und sprach »ich habe mich an den Fuß gestoßen, streich mir Teig darüber.« Und als ihm der Bäcker die Pfote bestrichen hatte, so lief er zum Müller und sprach »streu mir weißes Mehl auf meine Pfote.« Der Müller dachte »der Wolf will einen betrügen,« und weigerte sich, aber der Wolf sprach »wenn du es nicht tust, so fresse ich dich.« Da fürchtete sich der Müller und machte ihm die Pfote weiß. Ja, so sind die Menschen.