CSS媒体查询 width VS device-width

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:

**CSS Media Dimensions**
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-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

最新文章

热门文章