Responsive Web Design Basics

The term Responsive Web Design was coined by Ethan Marcotte, to describe the practice of flowing layouts, page elements and images, by leveraging media queries to support various device display properties

We Will use three media queries:

Portrait Tablet
@media (min-width: 481px) and (max-width: 768px)

Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)

Portrait smart phone
@media (max-width: 320px)
With the introduction of CSS3 media queries, web developers can create CSS which enables a web page to adapt and respond to whatever device renders it.
Creating a responsive design, one where elements on the web page are fluid, has never been simpler.  If you have a basic understanding of CSS, then you possess all the skills required to get started with your own responsive design.


The term Responsive Web Design was coined by Ethan Marcotte, to describe the practice of flowing layouts, page elements and images, by leveraging media queries to support various device display properties.  As the name suggests, this design technique allows a web page to respond in real time to both a users behavior (browser window size), and device platform (including orientation).
Code example of a responsive web page
As you will see... my example is bias to the dimensions of Apple's iPad and iPhone, but you can certainly adapt my sample CSS to any device width or height that is meaningful to your target audience.  For this learning example I created a simple design that consists of a banner, with a main text area that is bordered by 3 widgets on the right.   The example will make use of three media queries.

Portrait Tablet
@media (min-width: 481px) and (max-width: 768px)

Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)

Portrait smart phone
@media (max-width: 320px)
Start by creating the standard CSS classes and setting default properties.  I marked-up my CSS defaults to support both desktop and landscape tablets by limiting the major elements to a width of 1000px.

<style  type="text/css">
#banner {
   margin-left:auto;
   margin-right:auto;
   width:1000px;
}
.
.
.
.widget-text {
   padding:10px;
   background-color:#FCFCFC;
}
</style>

The media queries
We will  create the media queries for each screen dimension your interested in supporting (responding to). 
  Media queries are exactly like any other CSS element,  you are simply providing an alternative set of CSS properties for the existing elements on your web page.  The browser will respond by calling the proper @media each time the web page is loaded or a user re-sizes the browser window.  Here are the three media queries I added support for:

<style  type="text/css">
@media (min-width: 481px) and (max-width: 768px) {
   #banner { width:740px; }
   #banner img { max-width:740px; max-height:222px; }
   #main { width:740px; }         
   #main-content { width:450px; float:left; }
   #widget-container { width:200px; float:right; }
   .widget-content { width:160px; }
}

@media (min-width: 321px) and (max-width: 480px) {
   #banner { width:450px; }
   #banner img { max-width:450px; max-height:135px; }
   #main { width:450px; }         
   #main-content { width:400px;}
   #widget-container { width:400px; }
   .widget-content { width:120px; margin:5px; float:left;}
   .widget-text { display:none; }
}

@media (max-width: 320px) {
   #banner { width:275px; }
   #banner img { max-width:275px; max-height:83px; }
   #main { width:250px; }         
   #main-content { width:250px;padding:0px;}
   #widget-container { width:250px; padding:0px; }
   .widget-content { width:250px; margin:5px;}
   .widget-text { display:none; }
}
</style>
Check the file Here