如何在Iconic中实现媒体查询 [英] How to implement Media queries in Iconic

问题描述

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

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

这是我的css代码。

Here is my css code.

iphone 6的媒体查询

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

iphone 4的媒体查询

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?

推荐答案

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

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

这个用于大屏幕（iPhone 6）

This one is used for large screens (iPhone 6)

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

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

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

这篇关于如何在Iconic中实现媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！