CSS Measurement Units

      This topic might sound a basic topic but there are a lot of developers out there using only px as a css measurement unit. I think it's important to know about what other options you have. I am going to cover the most common CSS measurement units in this post. I have created a demo in CodePen to demonstrate each measurement unit.

     Before talking about the measurement units, Let's talk about viewPort. ViewPort is the user's visible area of a web page. It changes from device to device.You can use viewport meta tags to control your page's layout and CSS rules. You can have multiple CSS rule sets, you can have different CSS files for different devices. Here is a list of devices and their default viewport values. 

Pixel

     Pixel defines a measurement in screen pixels. You need to be careful with CSS pixel unit. CSS pixel is actually a reference, not a device pixel. That's why the size looks different in different screen resolutions.There is a ratio between CSS pixel and device's pixel controlling the size. In a fixed way, The ratio is always 96 CSS pixel to an inch. You can change the pixel value in the demo to see the size change. As you can see in the demo, pixel do not care about viewport or the font-size.

EM

      EM is a relative measurement for the height of a font in em spaces. It is equivalent to the size of a given font. Sometimes you need to change the font size for different devices or for accessibility reasons. Size of the elements will be adjusted automatically if you use em unit. If you use pixel, then you need to change the size of the elements manually so the text can fit in the elements. You can change the font size value in the demo to see how em works. EM do not care about the viewport.

CH

      Character unit is dependent on font just like em. It changes as the font-family changes. Ch is based on the width of the zero(0) character instead of the height a character like em.You can change the font size value in the demo to see how ch works. CH do not care about the viewport. Pay attention to the EM size to understand the difference between EM and CH.

REM

       Rem works just like EM, except it uses the root font-size rather than the font-size of the HTML element. Usually it's value is 16px. As you can see in the demo, when you change the font-size, the size does not change like EM or CH.

VW

       1 Viewport Width is equal to 1% of the width of the viewport. It is similar to percentage unit, except it works like REM. It doesn't care about the current HTML element size, It always relative to the root. To demo this, resize your browser and watch how vw size changes in the demo.

VMIN

       It is the smaller percentage value of the viewport width or height. For example, 10vmin equals to 10% of the current viewport width, and 10% of the viewport height. To demo this, resize your browser and watch how vmin size changes in the demo.

VMAX

     It works just like vmin, It takes the larger value rather than the smaller value. To demo this, resize your browser and watch how vmax size changes in the demo.

%

      It's value based on the length of the same property of its parent HTML element.  To demo this, resize your browser and watch how percentage size changes in the demo.

Calc()

      This function is very useful when you need to calculate the size of an element dynamically. We used to do that with javascript, now you can dynamically calculate the size of an element. You must have a whitespace between the numbers in calc function. Try to change the Calc value in the demo to see how the calc function works.