如何在 Ionic 中实现媒体查询

我想为我的离子应用程序添加完整的背景图像，并为每个设备添加不同的图像。

这是我的 CSS 代码。

iPhone 6 媒体查询

@media(max-width:750px) and (max-height:1334px){
 .pane, .view{
      background: url(../img/home/Default-667h.png) no-repeat center top fixed;
      background-size: 100% auto;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

iPhone 4 的媒体查询

@media(max-width:640px) and (max-height:960px){
 .pane, .view{
      background: url(../img/home/Default@2x~iphone.png) no-repeat center top fixed;
      background-size: 100% auto;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

这在我的应用程序中不起作用。

ionic是否支持媒体查询？

我不确定 ionic 如何/是否处理媒体查询。

但你的最大宽度 and 最大高度与 iPhone 屏幕分辨率不匹配。

你必须使用设备独立像素 http://en.wikipedia.org/wiki/Device_independent_pixel，不是实际像素。

有关 iPhone 媒体查询的更多信息here https://stackoverflow.com/questions/25759046/iphone-6-and-6-plus-media-queries.