Responsive Web Design for all Devices

HTML5 and CSS 3.0 are come up with resolution of this problem, where we can create one common web site and that will be loaded in different browser (Devices) with different format.
Below are the screens which we have opened in different devices with different format

• Screen for general  desktop

 


 Screen for tablets





 

Mobile Screen



 


We have created same web site which is loading with different style based on selected device’s screen.
To achieve this solution I have used media query listeners of CSS 3.0.
Actually there is one Viewport metadata tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

And also in CSS style we have added media object with all screen resolution with font and width allocation based on specified screens.

Below are the styles for this example.

@media screen and (max-width: 478px)     { h1 { font-size: 30px; padding: 1px; } h2 { font-size: 1xpx; padding: 1px; } body { font-size: 13px; } }   @media screen and (max-width: 740px)     { .left-col { width: 100%; } .sidebar { width: 100%; } }   @media screen and (max-width: 480px) { }

In above code set different font size and padding based for screen 480px width and more than 740px as well as set sidebar width based on screen.
Other option about responsive design is define two separate css and load css based on screen size selection.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href=" media-queries_480.css" />