I have wrestled with this question for a long time, and also been muddled up the device pixel with the CSS pixel for some time. I'd like to share my findings and hope it helps someone.
What we will discuss here is for max width. The same goes for min and height naturally.
Difference
max-width is the width of the target display area, e.g. the browser; max-device-width is the width of the device's entire rendering area, i.e. the actual device screen.
- If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
- If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
Which one to use
With CSS media queries you can use either max-device-width or max-width. Personally I prefer max-width as it also gives the desktop a responsive look. The only case I can think of using the max-device-width rather than max-width is when we need to keep something consistent even when browser window has been re-sized. For example, the Menucool responsive slider(Ninja Slider) allows using different image pixels for different devices that will best fit. It is not expected to switch to different-sized image when re-sizing the screen as the image has already been loaded, so the slider is taking the screen width(max-device-width) approach.
Portrait or landscape orientation
You should be aware of that for some devices such as iPhone and iPad, the max-device-width or max-width always corresponds to the width of the device in portrait mode (320px for iPhone, 768px for iPad), regardless of whether the device is in portrait mode or not. With other devices, its max-device-width or max-width changes depending on its orientation.
In case you want to capture device orientation and apply specific styles to it:
Don't confuse device pixels with css pixels
Sometimes you may hear different screen resolutions about a device. Take iPhone as an example, the resolution is 320x480 for iPhone 3, 640x960 for iPhone 4, and 640x1136 for iPhone 5.
This is due to iPhone 4/5's retina display, which crams two device pixels into each CSS pixel on the screen.
Usually you don't need to worry about the device pixel. Because in CSS media queries, the value of max-device-width or max-width is based on the CSS pixel instead of the device pixel.
In the very rare case when you really want to use different styling for iPhone 3 and iPhone 4, you can: