CODEWITHSUNDEEP
ionic-framework
Soundhar Raj
Soundhar Raj

Reputation: 633

How to implement Media queries in Ionic

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?

Upvotes: 3

Views: 25856

Answers (2)

Jad Salhani
Jad Salhani

Reputation: 490

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

Upvotes: 0

96khz
96khz

Reputation: 298

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.

Upvotes: 1

Related Questions