Ionic - Media queries

I Wanted to add full background image for my ionic app & different image for each device.

Here is my css code.

Media Query for 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%;
    }
  }

media query for 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%;
    }
  }

This is not working in my app.

Whether ionic supports media query?

Thanks, Raj.

I'm not sure how/if ionic handles media queries.

But your max-width and max-height do not match the iPhone screen resolutions.

You have to use device independent pixels, not actual pixels.

More info on iPhone media queries here.

Ionic does support media queries (I'm using them myself in my company's app), but I think you're missing a parameter. Here is an example I am using

This one is used for large screens (iPhone 6)

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

This one is used for small screens (like iPhone 5s)

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