Responsive Web Design

I have recently been working with jQuery Mobile and learned something pretty awesome about CSS. I was trying to think how I could make my web page look different on a phone and a tablet. That is when I looked into what jQuery Mobile was doing on their docs page. You can target a device by running a query through CSS to check for the devices width. Here is the example.

@media all and (min-width: 650px){
      /*Do css styling here for devices with a width of 650px or greater */
}
@media all and (min-width: 750px){
      /*Do css styling here for devices with a width of 750px or greater */
}
@media all and (min-width: 1200px){
      /*Do css styling here for devices with a width of 1200px or greater */
}

This also works great in a desktop environment. As you re-size the browser window the different styles will come into play overwriting the previous styles. The above example is using the min-width property, but the max-width property can also be used to effect devices that are the same or smaller than the max-width.