Responsive design using css

Nice to see you in another post.
In this post I like to discus some of the techniques we can use to design a responsive website using css.
Although technology is growing much we should adopt to it so that we can survive. I understand it is not the time for motivation.
The think I like to discuss in this post is how to design our site responsive.

got it from bluecorona.com

What is responsive?

When we design our site using our computer. Normally we check the site in computer only and in maximized window. But when it comes to user they could use it in their smart phones or in some other devices, some times they could visit our site using minimized browsers window.
CSS3 carries many new features for it. But here I like to share some techniques to use to make our site responsive.

Percentage

We can add percentage to design a responsive site. If our nav bar should be fill the view port we can add naves bar width as 100% instead of giving it in pixels. so that you will get a responsive design.

vh and vw

Although percentage is working it is not fulfilling the exact purpose. So we can use vh and vw. vh and vw refers view port height and view port width respectively. Same like 100 vw means full view port and 50 vh means half of view ports height. If view ports width is 110px 1vw is 1.1px.
The percentage acts from its parent element. but vh or vw acts its full view ports size.

em and rem

em is specially used to define font size. with the root font size it will select its own size. for example if we fixed it with px or pt we may not change it responsive but if we give it with em or rem it will automatically adjust it according to the device we use. To read more click here