Prozente

Pixel sind einfach zu verstehen. Ein Pixel, ein Bildschirmpunkt*.

16px sind sinnvolle Textschriftgrösse (und die Standardschriftgrösse).

1200 - 1800 Pixel breit sind klassische Bildschirme breit, grosse auch mal über 2000 Pixel. 320 - ca. 500 Pixel breit sind Handy-Displays.

Aber sind Pixel als Einheit immer die beste Wahl? Als Webdesigner benötigen wir Layouts die sich dem Endgerät anpassen, die auf einem grossen Bildschirm gut aussehen und auf dem Handy genauso. Eine statische Einheit ist dafür nicht immer die beste Wahl, eine flexiblere Einheit zu wählen, kann viel dazu beitragen, dass ein Layout sich verschiedenen Umgebungen gut anpasst.

Prozentangaben sind oft sinnvoller, da sie Design ermöglichen, das in verschiedenen Kontexten gut aussieht. Allerdings sind sie etwas komplizierter. Denn die Prozente beziehen sich immer auf etwas anderes. Oft machen diese Bezüge intuitiv Sinn, manchmal hilft es genau zu wissen, auf was sich die Prozente beziehen.

Ein kurzes Überblick.

font-size: 150%;
/* Bezieht sich auf die Schriftgrösse des Elternelementes */

line-height: 150%;
/* Bezieht sich auf die Schriftgrösse desselben Elements */

width: 50%;
/* Die Box ist halb so breit wie das Elternelement */

margin-left: 10%;
/* Bezieht sich auf die Breite des Elternelementes */
margin-top: 10%;
/* Bezieht sich ebenfalls auf die Breite(!) des Elternelements */

border-top-width: 10%;
/* Ungültiger Wert, darf nicht in Prozenten angegeben werden */

Breite von Boxen in Prozent

Wenn es um die Breite eines Elementes geht, ist es oft wünschenswert, dass es sich nur bis zu einem bestimmten Punkt ausdehnt oder verkleinert. Man findet prozentuale Breiten deshalb oft zusammen mit CSS-Eigenschaften die eine minimale oder maximale Breite bestimmen, diese überschreibt die Angabe in width.

width: 80%;
min-width:300px; /* Mindestbreite */
max-width: 1200px; /*Maximale Breite */

min-content
/* Mindestens so breit wie der Inhalt es nötig macht, für mehr Details siehe diesen css-tricks-artikel */

max-content, fit-content
/* Beide selten in Gebrauch, siehe diesen css-tricks-artikel für Details */

Auch für diese CSS-Eigenschaften können verschiedene Einheiten verwendet werden.

Sinnvoll ist oft eine Kombination, im obigen Code ist die Box 80% der äusseren Box breit, hat aber eine Mindest- und eine Maximalbreite. Das geht auch umgekehrt, man kann einer Box eine fixe Breite geben, aber eine Mindest- und/oder eine Maximalbreite in Prozent oder einer anderen Einheit.