Everyone needs to measure something or the other, the measurement units tend to differ according to the type of object that you have to measure, for a smaller object like the length of a pencil we would most probably use a smaller unit such as centimeters. For larger lengths like the distance between your house and your workplace, we may use meters or even kilometers and so on...
Such a system also works when we are designing web pages. For adding visual enhancement to the web pages we need to keep track of how much amount of space an element takes on the screen and adjust those measurements.
For making these measurements on the web pages we use CSS units. There are bunch of CSS units px, rems, ems, etc. But basically, the CSS units are divided into two major groups: Absolute units & Relative units
1. Relative Units
Relative units are as the name suggests relative their parents element's dimensions, the viewport dimensions or the font sizes.
1.1 Parents Dimensions (%)
The percentage(%) symbol is used to give the lengths of an element according to the lengths of their immediate parent's dimension. In the below example we have given width and height of the parent div (tomato background) as 200px and the child div (violet background) the width and height of 50%.
With some math we can find the width and height of the child div would be *50% of 200px i.e. 100px *
1.2 Viewport Dimensions ( vh, vw, vmin, vmax );
The viewport means the screen dimensions that the browser is occupying. The viewport can be equal to the absolute screen dimensions of our monitor screen but that's not always the case when we minimize the browser window or resize the browser window the corresponding viewport dimensions changes.
1.2.1 Vh and Vw
For these units, we need to imagine our viewport is divided into a grid of 100 rows and 100 columns. The height of the viewport is given by 100vh while the width of the viewport is given by 100vw. So each cell in the grid is of height 1vh and width of 1vw.
In the below example the div is given the height of 30vh and width of 30vw. you can play with the dimensions of the window and see the dimensions of the div change.
1.2.2 Vmin and Vmax
These are a pair of relatively lesser-known units. The unit vmin means that the side of the element depends upon the side of the viewport which has the minimum length. That is, if the height of the browser window is less than its width, 1vmin will be equivalent to 1vh. If the width of the browser is less than its height, 1vmin is equivalent to 1vw.
Vmax on the other hand is exactly opposite to vmin. It uses the ratio of the larger side of the viewport.
Understanding vmin and vmax can be a tad bit difficult. It is one of the reasons they aren't used widely in CSS. Moving on.
1.3 Current Font size ( em, rem, ch, ex)
Yup, you heard it right, we can also define the length of the dimensions of an element based on the font sizes. These are one of the popular ways used to define the lengths let's know more about them.
1.3.1 Rem and Em
Em stands for ephemeral unit which is most of the time related to the font size of the current element. Most of the time because if the font size of the current element is not given then em works according to the font size of the parent element.
Rem stands for Root em which means the root font size of the HTML. As default 1rem = 16px as long as we explicitly change it. Rems are preferred for making the web pages responsive as we can make changes everywhere by just changing the font size of the root in a single place.
1.3.2 Ex and Ch
Here comes the troll units. Yup! I said troll units because the length of 1ex is measured by the height of the letter 'X' in the current font size . Similarly the length of 1ch is measured by the width of the number '0' in the current font size.
2 Absolute units
Absolute units are the absolute measurements. They don't depend on any other elements they are standalone units. These are useful when you have to perfect measurements to the elements irrespective of any other conditions.
2.1 Pixels ( px )
Who doesn't love pixels? Pixels are the way the world works. Designs are made in pixels, web pages are rendered in pixels, JavaScript reads images in pixels and hence, because of all the above reasons and more, pixels are the most used units in a variety of fields.
in the below example we have given the container the height and width of 100px. This is what we simply get
2.2 Millimeters, Centimeters, Inches, Points, Picas
These names are all-familiar to us. The real-life units that are used in our day to day lives.
Below are the examples of each of them. Each of them in 5 units of their measurements
You'll be surprised at what you can do with CSS. The styling of the most opulent websites, with sophisticated features and lavish animations, all comes down to CSS. So, don't be afraid to play with CSS and try new things!
Top comments (1)
Great explanation.