Did you know that great bakers use gram as a unit of measurement for all ingredients in bread? (yes, for water too!)
Even if you might use ml or other units for different recipes in the kitchen, in case you want to make bread, the rules change. Same with CSS! Different scenarios, different rules, different units of measurement.
Let's bake!
Introduction
The web page you will design is two-dimensional, meaning you will use 2 dimensions to define it. Usually, they are expressed as height & weight.
But these can be expressed in various other ways, depending on your target code: vertical & horizontal, length & breadth, x & y etc.
These dimensions need to be defined using several units of measurement. CSS units are broadly divided into 2 main categories: absolute and relative.
1. Absolute Units
Used on fixed-sized web pages, absolute units are constant across all devices, meaning they are not suitable for all viewport sizes.
Absolute units are best to be used for printing rather than screen output as it is preferable to use them when you know exactly your web page size will be constant.
Out of these, the ones you will come across the most are px and cm.
2. Relative Units
In comparison with the absolute units, relative ones are more suitable for dynamic web pages. They are defined in relation to other elements of the parent element, the viewport or visible web page.
When viewport dimension is important, it is recommended to use vw and vh. It might seem over the hand to use relative units at first, but thanks to their scalability properties, they will help a lot in larger projects.
If you want to discover more about CSS values and units, I recommend this reading where you can go more in depth on the subject.
Top comments (0)