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

时间:2013-04-10 11:02:37

标签: css responsive-design media-queries

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

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

  2. 我想检查最小宽度和最大宽度,屏幕分辨率也可以从97dpi到ipad最大分辨率264dpi。但这似乎不起作用。如果我为hp加载的平板电脑提供单一分辨率最小宽度:155dpi它可以工作。但最小到最大分辨率条件似乎不起作用。你们能分享一下你的想法吗?

  3. 为此,我使用了类似下面的代码

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

3 个答案:

答案 0 :(得分:9)

resolution媒体查询doesn't have good support in webkit browsers yet,因此您可以使用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) {}

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

然而,我认为这对于较新的平板电脑效果不佳,因为我的手机有37em或更高。

怎么样:

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