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

Question

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

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

2. 我想检查最小宽度和最大宽度，屏幕分辨率也可能从 97dpi 到 ipad 最大分辨率 264dpi。但这似乎不起作用。如果我为 hp 加载的平板电脑提供单一分辨率 min-width: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+、Opera）和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

这些 MQ 将处理 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;
  }
}

Answer 3

根据 Quirksmode http://quirksmode.org/tablets.html的旧测量

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

但是，我猜这对于较新的平板电脑并不适用，因为我的手机有 37em 或更多。

关于什么：

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