Css 平板电脑最小分辨率和最大分辨率的媒体查询

目前正在开发一个响应性设计网站。我使用媒体查询根据宽度和屏幕分辨率定位不同的设备

我有一个场景，我想使用屏幕分辨率来定位设备，但我不明白这是如何工作的

我想检查最小宽度和最大宽度，屏幕分辨率也可以从97dpi到ipad最大分辨率264dpi。但这似乎不起作用。如果我给hp平板电脑一个最小宽度为155dpi的分辨率，它就可以工作了。但最小到最大分辨率条件似乎不起作用。你们能分享一下你们的想法吗

为此，我使用了如下代码

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

---

使用

分辨率

媒体查询，您可以使用

设备像素比率

获得更大的成功

因此，我们可以使用

分辨率

对那些理解它的浏览器（Firefox、IE9+、Opera）和

设备像素比

对所有webkit（Chrome、Safari、iOS和Android）重新表述您的媒体查询：

---

这些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;
  }
}

---

根据Quircksmode的早期测量结果

然而，我想这并不适用于较新的平板电脑，因为我的手机有37em或更多

那么：

@media screen and (min-width: 42em) {
}

我认为（在你写这篇文章一年后）现在是切换的好时机（从Chrome 29开始，我们现在是34，从Firefox 16开始，现在是29）。Chrome还鼓励人们在控制台信息中从dpi切换到dppx。避免与webkit前缀重叠很好，用媒体查询编写逻辑OR语句也很棘手（虽然“OR”用逗号表示，但根据我的经验，在单个语句中不能轻松组合“and”和“OR”）。编辑发言过快-移动设备中对“resolution”的支持仍然非常糟糕，不幸的是…：(

@media screen and (min-width: 37em) {
}

@media screen and (min-width: 42em) {
}