如何在Ionic中实施媒体查询

问题描述

我想为我的离子应用程序添加完整的背景图片，每个设备的图片都不一样.

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.

ionic是否支持媒体查询?

Whether ionic supports media query?

推荐答案

我不确定ionic如何处理媒体查询.

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

但是您的最大宽度和最大高度与iPhone屏幕分辨率不匹配.

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

您必须使用与设备无关的像素，而不是实际像素.

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

有关iPhone媒体查询的更多信息，请此处.

More info on iPhone media queries here.

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