Question

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

这是我的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%;
    }
  }

这在我的应用中无效。

离子是否支持媒体查询？

Answer 1

我不确定离子如何处理媒体查询。

但 max-width 和 max-height 与iPhone屏幕分辨率不匹配。

您必须使用device independent pixels，而非实际像素。

有关iPhone媒体查询的更多信息here。

Answer 2

Ionic确实支持媒体查询（我自己在我公司的应用程序中使用它们），但我认为你错过了一个参数。这是我正在使用的一个例子

这个用于大屏幕（iPhone 6）

@media screen and (min-height : 600px) and (max-height : 700px) {
    .Landing-formContainer{
        padding-top: 35px;
    }
}

这个用于小屏幕（如iPhone 5s）

@media screen and (min-height : 320px) and (max-height : 500px) {
    .Landing .slider-pager {
        top: 195px !important;
    }
}

如何在Ionic中实现媒体查询

2 个答案: