Die Units

px

Häufigster und bekanntester Wert das Pixel: 1px = 1px deines Bildschirms. Dieser Wert ist im Web sehr starr, 800px wird immer 800px entsprechen. Es wird schwieriger sein, eine mobilfreundliche Website zu erstellen, wenn man diese Einheit dort verwendet.

em

Maß, das proportional zur Größe der Schrift ist, die in dem Block vorhanden ist, der der Deklaration des Stils entspricht. Um diesen Fall zu veranschaulichen:

• Wenn ich meinen h1 habe, dessen Schriftgröße auf 54px festgelegt ist: 1em = 54px.
• Wenn ich meinen h3 habe, dessen Schriftgröße auf 32px festgelegt ist: 1em = 32px.

h1 {
    font-size: 54px;
    margin-bottom: 1em; /* entspricht 54px*/
}

h3 {
    font-size: 32px;
    margin-bottom: 1em; /* entspricht 32px*/
}

Meine Einheit em passt sich also der Schriftgröße an, die in meinem Element definiert ist.

%

Durch die Verwendung von Prozentwerten legen wir die Größe in Abhängigkeit von der Größe des Elternelements fest.

Im Folgenden haben wir zwei Blöcke mit denselben Eigenschaften, d. h. eine Breite von der Hälfte des übergeordneten Elements: width: 50%;. Hier ist der Code für die Formatierung:

darkgrey {
    width: 100%;
}

lightgrey {
     width: 80%;
}

coral {
    width: 30%;
}

blue {
    width: 50%;
}

green {
    width: 50%;
} 

Oben sehen Sie, dass der blaue und der grüne Block genau die gleichen Daten haben, nämlich width: 50%;, aber sie sind nicht gleich breit. Warum ist das so?

• Der blaue Block nimmt die 50% seines direkten Elternteils, also die 50% des dunkelgrauen Blocks.
• Der grüne Block nimmt die 50% seines direkten Elternteils, d.h. die 50% des blauen Blocks.

vw, vh

• vw = Viewport Width
• vh = Viewport Height

Dieser Wert wird also in Bezug auf den Viewport, also die Fenstergröße, berechnet.

div {
    width: 50vw; /* mein Block wird 50% der Breite meines Fensters einnehmen */
    height: 70vh; /* mein Block wird 50% der Höhe meines Fensters einnehmen */
}

calc()

Mithilfe von calc() ist es möglich, Berechnungen durchzuführen, um den Wert einer CSS-Eigenschaft zu bestimmen. Sie können alle der folgenden verschiedenen Operatoren verwenden, Addition +, Subtraktion -, Division /, Multiplikation *. Dies ist sehr nützlich, wenn Sie Elemente haben möchten, die ein Drittel des übergeordneten Elements ausmachen, also :

div {
    width: calc(100% / 3); /* Jedes meiner div-Elemente nimmt dann 33,3% der verfügbaren Breite ein */
}

Dies ist auch nützlich, wenn Sie möchten, dass Ihr Element 100% der Breite abzüglich der Breite Ihrer Ränder einnimmt, also :

div {
    width: calc(100% - 40px); /* Mein Element nimmt dann 100% an, indem es die 40px Rand oder Padding meines Elternteils abzieht */.
}

clamp()

Mit dem Wert clamp() können wir einfach einen Minimalwert, einen Standardwert und einen Maximalwert festlegen.

div {
    /* width: clamp(min, default, max); */
    width: clamp(250px, 20vw, 700px);    

    /* das ist so, als würde man sagen: */
    min-width: 250px;
    width: 20vw;
    max-width: 700px;
}

Dies ist auch nützlich, um eine dynamische Schrift zu erstellen, die sich der Bildschirmgröße anpasst.

div {
    font-size: clamp(18px, 6vw, 72px); /* Meine Schriftart wird also nie kleiner als 18px und nie größer als 72px sein, und dazwischen passt sie sich der Bildschirmgröße an */
}