Static VS Dynamic CSS units

Posted By : Shivam Gupta | 15-Jun-2016

html

Css units: For any designing the first thing which we require that is css units.There are lots of css units to define our project.

Pixel: It measures any design according to screen pixels. It provide completely accurate designs. The drawback of pixel that it does not give responsive design in every devices if we do not use media query.

Ex:

<div id="outer" style="width: 50px; height: 50px">
<div id="inner" style="width: 25px; height: 25px;">This is dummy text.This is dummy text.This is dummy text. </div>
</div>

2) em: it measures any designs according to font sizes. It is also known as scalable units because we only set font size in media query for adjustment of design in every devices.

In this we first assign font size to our body. Then rest font size is set to according to its relative parent font-size.

3)dp: In case of android designs dp(density independent pixel) dp is most preferable css units. In case of 160dpi screen devices 1dp = 1px.

4)percent: if we want to adjust our design in every devices automatically, then we assign css values in percentage. The drawback of this unit is that it is not provide completely accurate designs.

Ex:

<div id="outer" style="width: 60%; height: 40%">
<p id="inner" style="font-size: 15px; margin: 1%; padding: 0.625%;">This is dummy text.This is dummy text.This is dummy text.
</p>
</div>

5)rem: rem is also like em, but in this unit every font size is adjusted according to root element font-sizes.

6)vh: it measures according to viewport height. I.e. if we declare 1vh to any css property then it will take a space equal to 1percent of viewport height. It is also scalable css units.

Ex:

<div id="outer" style="width: 40vh; height: 40vh">
<p id="inner" style="font-size: 15px; margin: 3vh; padding: 1vh;">This is dummy text.This is dummy text.This is dummy text.
</p>
</div>

7)vw: it measures according to viewport width(The visible area). I.e. if we declare 1vw to any css property then it will take a space equal to 1percent of viewport width. It is also scalable css units.

Ex:

 <div id="outer" style="width: 40vw; height: 40vw">
<p id="inner" style="font-size: 15px; margin: 3vw; padding: 1vw;">This is dummy text.This is dummy text.This is dummy text.
</p>
</div>

8)ex: It measures the css properties according to height of lowercase ‘x’ letter of alphabet in given font sizes..

Ex:

<div id="outer" style="width: 40ex; height: 40ex">
<p id="inner" style="font-size: 15px; margin: 3ex; padding: 1ex;">This is dummy text.This is dummy text.This is dummy text.
</p>
</div>

THANKS