对于平板电脑最小分辨率和最大分辨率媒体查询(Media queries for tablet min

目前工作的一个响应式设计的网站。我用媒体查询指定功能，根据宽度和屏幕分辨率不同的设备。

我有一种情况是，我想利用屏幕分辨率为目标的设备，但我不明白这是如何工作。
我想检查两个最小宽度和最大宽度，与屏幕分辨率也可能范围从97dpi到ipad最大分辨率为264dpi。但是，这并不似乎工作。如果我给最小宽度单分辨率：155dpi惠普平板电脑装载它的工作原理。不过分钟，最大分辨率条件似乎不工作。难道你们分享你的想法。

为此，我已经使用类似下面的代码

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){

Answer 1:

该resolution媒体查询没有在WebKit浏览器很好的支持还使您可以使用获得更大的成功device-pixel-ratio代替。

http://bjango.com/articles/min-device-pixel-ratio/

因此，我们可以利用重申你媒体查询resolution为那些理解浏览器（Firefox，IE9 +，歌剧），以及device-pixel-ratio对一切事物的WebKit（Chrome浏览器，Safari浏览器，iOS和Android）：

@media only screen and (min-resolution:96dpi) and (max-resolution:264dpi) and (min-width:768px) and (max-width:1024px),
       only screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio:2) and (min-width:768px) and (max-width:1024px) {}

Answer 2:

这些MQS将处理在Windows8.1模拟器预设设置：

@media screen and (resolution: 96dpi) and (max-width: 512px) and (device-aspect-ratio: 1024/768),
  screen and (resolution: 96dpi) and (max-width: 683px) and (device-aspect-ratio: 1366/768),
  screen and (resolution: 96dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080),
  screen and (resolution: 96dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440) {
  body {
    background-color: red !important;
  }
}

@media screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1200),
  screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 720px) and (device-aspect-ratio: 1440/1080),
  screen and (min-resolution: 130dpi) and (max-resolution:140dpi) and (max-width: 960px) and (device-aspect-ratio: 1920/1080) {
  body {
    background-color: violet !important;
  }
}

@media screen and (max-resolution:  174dpi) and (min-resolution: 172dpi) and (max-width: 1280px) and (device-aspect-ratio: 2560/1440)  {
  body {
    background-color: purple !important;
  }
}