Difference between width and device-width in CSS media queries

Question

What is the difference (in simple terms) between height and width and device-width and device-height?

Answer 1

More than a late answer Hopes it will help Some one

In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen's resolution is 1440 x 900. This means the screen is 1440 pixels across, so it has a device-width of 1440px. Most mobile phones have a device-width of 480px or lower, including the popular iPhone 4 (with device-width: 320px), despite it technically having a 640 x 960 resolution. This is due to iPhone 4's retina display, which crams two device pixels into each CSS pixel on the screen. This is true for the Ipad 3 as well; its reported device-width is 768px just like its predecessors, even though its actual screen resolution is 1536px x 2048px. In general width is more versatile when it comes to creating responsive webpages, though device-width is useful when you wish to specifically target mobile devices (and not desktops with a small browser window for example)

as from developer.mozilla.org ,

width :
Value: Media: visual, tactile
Accepts min/max prefixes: yes

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

Note: As the user resizes the window browser switches style sheets as appropriate based on media queries using the width and height media features. !!!

i found this article very interestingly from javascriptkit : http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml