What is Responsive web design?

Internet browsing is no longer luxurious habit. It has become part of life now.Earlier time, internet browsing was possible in desktop and laptop computers and now the sceneraio has changed. People love to browse internet in mobile devices like iPad,tablets, iPhone and other mobile phones.

Responsive web design(RWD) is a technique by which internet browsers detect kind of display device whether it is iPad, tablet, desktop or iPhone and display the web pages accordingly.Browsers scale viewport width and fit on their screen. RWD, actually is possible with few simple steps.

Ideally, it is good idea to create separate css file, say responsive.css to include only css tags for the webpages with responsive design. With this, it will be easier to apply the codes and debug the errors.

To make responsive websites, include meta tag with viewport setting and reset the web pages when opened in different devices. This will define viewport needs and adjusts width of browser to width of devices.

In html file, include below meta tags which tells browsers to set width of browser with width of screens and reset the scale.

What is media query?

Media query assists to define CSS properties for devices with different sizes. Create separate css file, say responsive.css and include media query line as below. Creating different css file is not compulsory, however it will be easier to debug errors and to code in separate file. You can include below lines in same css file as well. The most important thing is, provide dimension of contaners in % not in pixels. @media screen and (max-width:900px){ } #wrapper { width:90%;} #leftColumn { width:70%;} #rightColumn { width:30%;} @media screen means only display devices not printers and other devices.max-width:900px means, apply the css rules only to those devices whose width is maximum 900px or less. On the same responsive.css file, similarly define media query rules for different display devices. For bigger screens,define as below: @media screen and (min-width:780px){ } #wrapper { width:95%;}