The term Responsive Web Design which is most commonly known as RWD refers to the aim of designing web pages in such a way that web pages can be viewed with the maximum ease along with great user experience over a wide range of devices which may include small screen sized mobile, tablet or large sized computer monitors. Responsive Web Design is considered as the key feature for better user experience on portable devices.<\/p>\n
So let\u2019s get into responsive web design and see how it actually works –<\/p>\n
To design a responsive web page we need basic knowledge of Media Query.<\/p>\n
Media Query usually instructs any of the modern browser to use CSS according to the width of device whether it\u2019s portable device or computer monitor. Whenever we design responsive web page we always add different css rules for different screen sizes using the media queries.<\/p>\n
Media Query includes two quite new terms which are min-width and max-width the term min-width refers to minimum size of screen required to allow CSS on device, similarly max-width refers to maximum size upto which CSS can be allowed on device.<\/p>\n
Here is how a media rule looks like-<\/p>\n
<\/p>\n
@media only screen and (min-width: 320px)\n {\n \/*Generic CSS Syntax*\/\n }\n\n@media only screen and (max-width: 320px)\n {\n \/*Generic CSS Syntax*\/\n }\n<\/pre>\nApart from media rules we also have to add html meta tag. Why do we use meta tag? We use<\/p>\n
<\/p>\n
Let\u2019s get into code to understand media rules which are considered as basic aspect of responsive web page design in more appropriate manner, Lets begin with a very basic HTML layout. Whenever we code css for responsive web page we must use percent as a unit for widths. Keeping this in mind let\u2019s code the css for html layout.<\/p>\n
Here is the html<\/code> and css<\/code> structure of layout –<\/p>\n