CSS Units

There are a lot of CSS units which will make your life a lot easier.

Font Unis

There are REM, EM and CH which are in relation to the fontsize.

Viewport Units

VH and VW are units depending on the browsers viewport. Simplified in relation to how large their browser window is.

rem

This unit references to the root font size. Eg 1rem is the same as the root font size.

Example

Normal text Double the normal text

Code

        .two-rem {
            font-size: 2rem;
        }

More information

Units and more in the Mozilla docs

em

This unit references to the parent font size. Eg 1em is the same as the root font size.

Example

Title with emoji which is 1.5 times the size🦄

and if we use the same emoji in a div it's relative to the div 1.5 times the size 🦄

Code

        .icon {
            font-size: 1.5em;
        }

vw and vh

Those two units represent the users viewport. So 100vw are 100% of the users view-width

Example

This div is 30% of the users view width
This div is 30% of the users view height

Code

        .vw{
            width: 30vw;
        }
        .vh {
            height: 30vh;
        }

ch

This property is also relativ to the font size. More specifict to the width of the 0 char. This is mostly usefull to set the width of inputs or paragraphs

Example

This text will be not be longer than 20chars. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna

Code

        .ch {
            width: 20ch;
        }

Tricks