RWD or Responsive Web Design refers to creating websites which look good on different devices by adjusting itself according to the size of the device.
Today different kinds of devices such as laptops,tablets,ipads and smartphones are used by the people all around the globe to access the internet and hence it is very important that a website looks good and works properly on every kind of device.
It is thus quite obvious that today RWD is an important skill which every web developer should have
Creating responsive web pages
Responsive web pages can be easily made using only html and css.
Using media queries is a popular way of making the website responsive using CSS.
media queries can be used to change the styling of your web page for viewports with various widths and heights or for landscape orientation and many other specifications.
An example of a simple media query
@media only screen and (max-width:600px){
//some code
}
This will implement the code written within the curly braces if the viewport width is less than or equal to 600px
Similarly this can be done for viewport with a width greater than 600px using min-width
@media only screen and (min-width:600px){
//some code
}
Today a huge no. of people use primarily their smartphones for using the internet and since that no. is increasing at a really fast rate, it is advisable to create "mobile first" web pages.
Mobile first web pages are those which are initially made to be viewed on a mobile and adjust themselves to look good if viewed on other devices.
While creating respinsive web pages, it is advised that one should not apply large fixed widths on their elements or use max-width or functions like min() , max() , or minmax() as an element with a large fixed width may stick out of the viewport when being viewed on a smaller device.
One should also know about absolute and relative lengths in CSS for responsive web design.
The following page by w3schools has a good reference of absolute and relative lengths
Thanks for giving this a read