Responsive Web Design And CSS3 media queries

Responsive Web Design is an approach to design a website easily read from desktop to mobile phones.When you resize your web browser, the website content is change accordingly. The example of websites using Responsive Web Design:
US President Obama website:
http://www.barackobama.com/
The Boston Globe  and Simple Bits

To test your website for   Responsive Web Design, you just need to resize the website to the mobile phone size or using the following mobile emulators:
Opera Mobile Emulator   and Mobilizer.

There are also some tools to test  Responsive Web Design:
mattkersley.com/responsive , quirktools.com/screenfly, responsinator.com

Some websites have two versions, one for desktop, and another for mobiles. They are difficult to be updated. Using  Responsive Web Design can save a lot of work.

Responsive Web Design uses CSS3 media queries, which is an extension CSS3 to different media devices. Examples of CSS3 media queries:

@import url(/style.css) screen and (min-width:800px)
    and (max-width:1280px);

i.e.load style.css if the width of the output device is between 800px and 1280px.

@media screen and (max-width:300px) {
    .sidebar { display: none }
  }

 i.e.do not display sidebar if the width of the output device is less than 300px

 @media screen and (min-width:1280px) {
    body { font-size: 16px }
  }

 i.e.the font size is set to 16px in body if the width of the output device is greater than 1280px