Responsive Design

Ref: https://www.ibm.com/developerworks/mobile/library/mo-jquery-responsive-design/

With a combination of CSS3 media queries and the jQuery Mobile framework, it is possible to achieve a responsive design that accommodates mobile, tablet, and desktop environments. 


Media queries can be used to determine the type of device that is interacting with your web page as well as allowing developers to determine the physical properties of the device that is viewing your web pages. 

Using media queries to deliver device-specific style sheets

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

The media attribute in this example contains a media type value that is set to screen and a media query (which is enclosed in parentheses). This particular media query checks to see whether the screen resolution of the user's current device is less than or equal to 799px. If it is, this mobile/tablet style sheet is delivered; otherwise, this style sheet is not delivered. You can include multiple style sheet links within a single web page, each with its own media query to render your page differently based on as many different resolutions as you desire.

most common number of resolution-based style sheets is 3:
one for mobile and tablet devices,
one for lower-resolution desktop monitor, and
one for higher-resolution desktop monitor

Using media queries to deliver device-specific CSS

@media all and (min-width: 800px) {
  #nav {
    width: 300px;
  }
}
@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
}

Using media queries to detect Retina  (need to placed topmost)
@meida all and (-webkit-min-device-pixel-ration: 2){ ... }

Using media queries to detect Aspect Ratio
@media screen and (device-aspect-ration: 16/9) { ... }


Using media queries to detect Orientation (supported by iPad but not iPhone)
@media (orientation:portrait) { ... }


Browser support media query: Firefox, Safari, Chrome and Opera, IE9

For IE7 & 8, need to use IE specific stylesheet.
Ref: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

use
<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

detect IE 7

<!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->