CSS媒体查询 width VS device-width

标签：mobile   ati   eating   always   creat   actual   example   rip   javascrip   

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 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:

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-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 */
}

转载：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

CSS媒体查询 width VS device-width

标签：mobile   ati   eating   always   creat   actual   example   rip   javascrip   

原文地址：http://www.cnblogs.com/liaojie970/p/7339721.html