Following are some examples for @media queries to be placed at the end of your stylesheet or in a separate "media only" stylesheet. With the ever changing range of device widths, you may need to add more ranges or tweak these.

/*******All Mobile*****************/

@media all and (max-width: 1024px) {


/********iPad Portrait*****************/

@media all and (min-width: 601px) and (max-width: 768px) {


/**********Narrow Tablets***********/

@media all and (min-width: 481px) and (max-width: 600px) {


/**********iPhone4 Landscape***********/

@media all and (min-width: 321px) and (max-width: 480px) {


/***********iPhone4 portrait************/

@media all and (max-width: 320px) {


You can have a whole .css stylesheet for each device if you have extensive changes for each device.  In that case you can set the media within the <head> portion of your page. (Credit: When using "max-device-width" this styling will NOT show up if you reduce the size of the browser window on your computer monitor.

<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="/css/phone-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="/css/phone-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="/css/ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="/css/ipad-landscape.css" />

When you have HTML test for the screen parameters, as shown above, and you have it call in a separate stylesheet, you DO NOT need to use @media {} in these stylesheets. You display the styles just as you would any stylesheet. Do load them after the main stylesheet has been linked. One advantage to this method is that the styling for each device is in its own separate location. It does require the browser to load a separate file, which takes more time, but then the main stylesheet is not as long, so that takes less time.