Responsive web design (RWD) is a web design approach to make web pages render well on all screen sizes and resolutions while ensuring good usability. It enables automatic adaption to the screen, whether the content is viewed on a tablet, phone, television, or watch.

Relative Length Units:

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page. [Detailed guide]

1. em:

   The em unit is relative to the font size of the parent container when used to give values to typographic properties, and relative to the font size of the element itself when dealing with other properties such as width or padding.

   
   

   1em is 1 times of the font size of the (parent) element.

   This is a first heading

   This is a second heading

   This is a third heading

   Observe the CSS code below and compare the computed values in px to the assigned values in em. You can verify this using the dev tools.

   .container { font-size: 10px; height: 30em; /*Computed: 300px*/ } .container>#h-1{ font-size: 2em; /*Computed: 20px*/ } .container>#h-2{ font-size: 3em; /*Computed: 30px*/ } .container>#h-3{ font-size: 5em; /*Computed: 50px*/ }
2. rem:

   This is the same as em but is relative to html root element instead of the parent. This is helpful because you can change the font size of the all the elements in the page by just changing the font size of the root html. So instead of setting font-size in pixels (px), use rem.

3. vw and vh:

   1vw is 1% of the viewport's width, and 1vh is the 1% of the viewport's height. See the container below, and the heading in it scaling with the viewport size.

   This is a heading and the background color is brown

   #vwh-example { width: 50vw; height: 30vh; margin: 10px auto; } #vwh-example>h1 { font-size: 3vw; }