Charisma of the different CSS Units
“ Hey Girl, you are the CSS to my HTML! ”
I am quite sure that every CSS Developer out there has heard or read this quote, at least once. And why not, after all, no other language has such an appealing and meaningful quote!
But in order to be a professional CSS developer, responsive design is an utmost requirement, and making responsive design has never been easier with the help of Media Queries in CSS. But what if I tell you, you can even cut down half of your Media Queries, just with the help of the different CSS Units, that rule the world of CSS out there!
Well, that’s what this article is about. I will tell you some of the most important CSS units, and where to use them. Not only that, I will also tell you how to convert them into one another, so you can start using them, as soon as you are over with this article.
Pixels (px)
1 pixel is defined as (1/96)th of 1 inch. It is an absolute unit, that is they do not change according to screen size or anything else. One must ought to know what it is, cause behind the scenes, all the units are converted to pixels, by the Browser.
rem(s) & em(s)
Now, here’s where things start to get interesting. Unlike pixels, which is an absolute unit, both of these are relative units. They are basically font-based units, that is they change their value according to the font size of the current element or the parent element. Let’s take a deeper dive into rem(s) first and then we will move onto em(s).
rem(s)
- Any value defined in rem(s) will adjust itself relative to the font size of the root element (i.e. the HTML element). In most browsers, the default font-size is 16px.
- x rem = x * (font size of root element) px . For easier conversion, I define the size of the root element as 10px.
em(s)
- These are even more intriguing than rem(s), as depending on the area of their usage, they will change their formula of conversion.
- If you use them for defining font sizes, then x em = x * (font size of parent element). And if you use them for defining lengths, then x em = x * (font size of current element).
You can use rem(s) and em(s) almost anywhere where you are in dire need of a scalable layout. I find them mostly useful while defining padding, margin, height and width of the various elements. But their applications are literally limitless.
So instead of re-defining the values of all these properties in all the different media queries, just write a single line of media query, where you redefine the value of font size of the root/parent / current element, and Voila!
Viewport Width(vw) & Viewport Height(vh)
Now, I would like to introduce you all, with the beasts of CSS units. They are also relative units, and are based on the dimensions of the viewport. They eliminate the need to write even a single line of media query. You just define a value in either of these, and you will have a scalable component in your design, in absolutely no time!
Viewport Width(vw)
- A value defined in this, will adjust itself, relative to the width of the Viewport.
- x vw = x * (1% of the width of the Viewport)
- I know what all you must be wondering, where to use it. Let’s say that you want to create a sidebar, which should occupy only 60% of the width of the screen. Just define the width of the sidebar as 60vw, and you are done! And this is just one of the many applications, of this unit.
Viewport Height(vh)
- As the name suggests, a value defined in this, will adjust itself, relative to the height of the Viewport.
- x vh = x * (1% of the height of the Viewport)
- Just like vw, it’s use is also similar. Let’s say that you want to make sure that an element occupies the complete height of the screen. Just define the height as 100vh, and the rest would be taken care by the browser.
Well, that’s it for now. I hope you have a better understanding of how different CSS units work and make the life of a CSS Developer much easier.
Have a nice day!
