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- 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 rarely do desktops have 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:
| Device | resolution (px) | device-width/ device-height (px) |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480, in both portrait and landscape mode |
| iPhone 4 | 640 x 960 | 320 x 480, in both portrait and landscape mode. device-pixel-ratio is 2 |
| iPhone 5, 5s | 640 x 1136 | 320 x 568, in both portrait and landscape mode. device-pixel-ratio is 2 |
| iPhone 6 | 750 x 1334 | 375 x 667, in both portrait and landscape mode. device-pixel-ratio is 2 |
| iPhone 6 plus | 1242 x 2208 | 414 x 736, in both portrait and landscape mode. device-pixel-ratio is 3 |
| iPad 1 and 2 | 768 x 1024 | 768 x 1024, in both portrait and landscape mode |
| iPad 3 | 1536 x 2048 | 768 x 1024, in both portrait and landscape mode
CSS pixel density is 2 |
| Samsung Galaxy S I and II | 480 x 800 | 320 x 533, 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 | 360 x 640, portrait mode
CSS pixel density is 1.5 |
| Amazon Kindle Fire | 1024 x 600 | 1024 x 600, landscape mode |
Just to complicate things even more, in iPhone and iPad devices, the device-width always corresponds to the width of the device in portrait mode, regardless of whether the device is in that mode or landscape instead. With other devices, its device-width changes depending on its orientation.
* For a more complete list of devices and their screen resolutions, visit this page.
Lets see some more CSS media queries now that capture different devices and screen dimensions:
/* #### Mobile Phones Portrait #### */ @media screen and (max-device- 480px) and (orientation: portrait){ /* some CSS here */ } /* #### Mobile Phones Landscape #### */ @media screen and (max-device- 640px) and (orientation: landscape){ /* some CSS here */ } /* #### Mobile Phones Portrait or Landscape #### */ @media screen and (max-device- 640px){ /* some CSS here */ } /* #### iPhone 4+ Portrait or Landscape #### */ @media screen and (min-device- 320px) and (-webkit-min-device-pixel-ratio: 2){ /* some CSS here */ } /* #### iPhone 5 Portrait or Landscape #### */ @media (device-height: 568px) and (device- 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- 375px) and (-webkit-min-device-pixel-ratio: 3){ /* some CSS here */ } /* #### Tablets Portrait or Landscape #### */ @media screen and (min-device- 768px) and (max-device- 1024px){ /* some CSS here */ } /* #### Desktops #### */ @media screen and (min- 1024px){ /* some CSS here */ }
转载：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml