Hey folks! I know you have spent hours making a webpage responsive in every way. It's a very boring and hard task for a frontend developer or web developer in general.

Today, I come up with a very little yet powerful trick to make the webpage responsive approach very handy. Before dive into that, let's talk about the mighty "Rem".

let's have a conversation regarding this.

--- Hey, what the hell is 'rem' bro? --- rem is a unit defined by the root element's font size of our DOM. --- But what is the root element of our dom? --- You know it, man. It's html. --- Oh! So how it can define Rem? --- Very simple! If you set the root font size to 10px, then 1rem = 10px; if you set it to 20px, then 1rem will be 20px. got it? --- O yeah!

html {

    font-size: 10px;  /*---Now 1rem = 10px--*/

}
/*--Or--*/

html {

    font-size: 20px; /*---Now 1rem = 20px--*/

}

Why you should know 'rem' to learn this responsive approach? Well, it's all about the usage of 'rem' in your CSS stylesheet. You have to make sure that you use only 'rem' instead of 'px'.

Before using rem, you need to add an easy divisor number as your font size in the root element (html) , so that you can calculate it at a glance according to your UI design.

Say, you set html font size to 10px. Now you have a UI block in which the margin-top is 87px. It will be very easy to convert the px into rem. In this case, 8.7rem.

After ensuring this, now the only thing you need to do, set media query for your html tag and change the font size larger for large screens and smaller for small screens. like this:

/* --- For medium screens and default----*/

html {

    font-size: 10px;  /*---Now 1rem = 10px--*/

}


/* --- For smaller screens----*/

@media (max-width: 767px){

    html {

    font-size: 8px;     /*---If screen size is in between 0px-767px then 1rem = 8px--  */

   }
}

/* --- For larger screens----*/

@media (min-width: 1200px){

    html {

    font-size: 12px;     /*---If screen size is  1200px+ then 1rem = 12px   --  */

   }
}

Here, if screen size is maximum 767px, then html font size will be 8px. So, 1 rem = 8px. And if the screen size is more than 1200px, then html font size will be 12px. And for the rest screens, it remains 10px.

Now if you set a padding size to '3rem', according to the media query, small screens will get it as '24px', a larger screen will get it as 36px, and the medium screens will get it as 30px.

You can make your font size, height, width, padding, margin responsive with this little magic!

Have a nice Responsive journey! Take care!