Hello, recently I was working on HTML-CSS-JS project and came across different CSS size units. At first it was bit confusing for me to understand when should I use which unit. However, on diving into basics of it I am now pretty much clear about these units. Atleast the ones those I used in the project. I wanted to explain the same in very simple manner to anyone who is facing similar dilemma as me. I know there are experts in this field and probably this is an old and basic stuff explained by many already, but for me its new and I want to give me 2 cents to make programming easy and fun. So, let’s begin and I hope it helps you.
1. How % works?
Let’s understand it with an example as below. We have “parent-class” and within it we have a “child-class” and we write a simple text as “CHILD-CLASS” in it.
In the CSS we give two different properties to each of the classes as below. Please note we have not mentioned width in the “.parent-class” so by default it will take 100%. But in “.child-class” we have specifically mentioned width as 50%.
And this is how it’s shown on the browser. As you can see the parent in blueviolet color is occupying complete screen whereas the child in green is occupying 50% of the PARENT space. So here it calculates 50% from the space allocated to parent. So % takes into consideration space of the parent.
Let’s now try and prove this theory by reducing the “.parent-class” by giving it a width this time of 50% and keeping the width of “.child-class” as it is from our previous example i.e. 50%.
Now you see the blueviolet block has shrinked to 50% of the entire space and the green block has reduced itself to 50% of the blueviolet blocks space.
2. How vh & vw works?
So vh (Viewport Height) and vw (Viewport Width) is the height and width of viewable screen. 100VH would represent 100% of the viewport's height, or the full height of the screen and 100VW represents viewable screen's width.
Let’s take an example by creating a “vhvwcontainer” class and inside it we say our favorite two words “Hello World”
In the CSS we declare the property for the class and for now give only the background-color.
As you can see the Hello World block take the entire width but the height is calculated according to the height of the words.
But now as we add height in vh and width in vw units the display changes
Now we get 100% of the viewable screen height and 50% of the viewable screen’s width.
3. How em and rem work?
Let’s use a simple example to demonstrate these units. Say we have a parent class and inside it we create different child classes.
In css we give .parent font-size of 20 px and .child2 font size of 3em.
Now checking on the browser we see the font size of CHILD2 is 60px although we gave it in 3em units. That’s because em will calculate font-size based on the parent property, which we declared as 20px. You can see it being clearly mentioned under the Computed tab.
However, in case of rem it calculates the font size based on the root element that is the <html> tag which has by default size of 16px, but for this example we give it as 10px.
When we now change the root and .sayhello properties as below
The font-size changed to 75 px (5rem x 1.5em x 10px) as shown under the Computed tab.
Hope these simple examples gave you a clear idea about %, vh, vw, em and rem units and how they behave. Do consider playing more with these units in your free time to have better control over the sizing aspects in the program.