CSS Media query width VS device-width

In CSS media the difference betweenwidthanddevice-widthCan is a bit muddled, so lets expound on that a bit.device-widthRefers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen ' s resolution are 1440 x 900. This means's 1440 pixels across, so it has adevice-widthof 1440px. Most mobile phones has a device-width of 480px or lower, including the popular IPhone 4 (with device-width:320px), DESPI Te it technically has a 640 x 960 resolution. This was due to IPhone 4 's Retina display, which crams, and pixels into each of the CSS pixel on the screen. This is true to the Ipad 3 as well; Its reporteddevice-widthIs 768px just-like it predecessors, even though its actual screens resolution is 1536px x 2048px. In generalwidthis more versatile when it comes to creating responsive webpages, thoughdevice-widthis useful if you wish to specifically target mobile devices (and not desktops with a small browser windows for example), As rarely do desktops has a screen resolutions below a certain number such as 320px x 480px.

The below shows the screen resolution and CSS media device dimensions of some of the popular devices out there:

CSS Media Dimensions

Device	resolution (PX)	device-width/device-height (px)
Iphone	480 x	x 480, in both portrait and landscape mode
IPhone 4	640 x 960	x 480, in both portrait and landscape mode. is device-pixel-ratio 2
IPhone 5, 5s	640 x 1136	x 568, in both portrait and landscape mode. is device-pixel-ratio 2
IPhone 6	1334 X	375 x 667, in both portrait and landscape mode. is device-pixel-ratio 2
IPhone 6 Plus	1242 x 2208	414 x 736, in both portrait and landscape mode. is device-pixel-ratio 3
IPad 1 and 2	768 x 1024	768 x 1024x768, in both portrait and landscape mode
IPad 3	1536 x 2048	768 x 1024x768, in both portrait and landscape mode CSS pixel density is 2
Samsung Galaxy S I and II	480 x 800	533 x, in portrait mode CSS pixel density is 1.5
Samsung Galaxy S III	720 x 1280	360? X 640?, in portrait mode
HTC Evo 3D	540 x 960	x 640, Portrait mode CSS pixel density is 1.5
Amazon Kindle Fire	1024x768 x 600	1024x768 x, Landscape mode

Just to complicate things even more, on iPhone and IPad devices, the device-width always corresponds to the width of the D Evice in portrait mode, regardless of whether the device was in that mode or landscape instead. With the other devices, it device-width changes depending on its orientation.

* For a more complete list of devices and their screens resolutions, visit this page.

Lets See some + CSS media queries now, capture different devices and screen dimensions:

/*# # # Mobile Phones Portrait # # #*/@media screen and (max-device-width:480px) and (orientation:portrait){/*some CSS here*/}/*# # # Mobile Phones Landscape # # #*/@media screen and (max-device-width:640px) and (Orientation:landscape){/*some CSS here*/}/*# # # Mobile Phones Portrait or Landscape # # # # #*/@media screen and (max-device-width:640px){/*some CSS here*/}/*# # # # IPhone 4+ Portrait or Landscape # # # #*/@media screen and (min-device-width:320px) and (-webkit-min-device-pixel-ratio:2){/*some CSS here*/}/*# # # # IPhone 5 Portrait or Landscape # # # #*/@media (device-height:568px) and (device-width:320px) and (-webkit-min-device-pixel-ratio:2){/*some CSS here*/}/*# # # # IPhone 6 and 6 Plus Portrait or Landscape # # # #*/@media (MIN-DEVICE-HEIGHT:667PX) and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:3){/*some CSS here*/}/*# # # # Tablets Portrait or Landscape # # #*/@media screen and (min-device-width:768px) and (max-device-width:1024px){/*some CSS here*/}/*# # # # desktops # #*/@media screen and (min-width:1024px){/*some CSS here*/}

Reprint: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

CSS Media query width VS device-width