Question

我想根据宽高比加载不同的背景图片。我使用LESS css。问题是，我根本没有得到任何背景图像，我无法解决问题。

（我知道目前的CSS是无稽之谈。我试图简化我的代码以使其工作，但我无法）

这是媒体查询的LESS css部分：

#page_back {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height:100%;
     overflow: hidden;
     z-index: 1;
     background-repeat: no-repeat;
     background-size: 100% auto;

     @media all and (min-aspect-ratio: 1/1) {
         background-image: url(../../images/front.jpg);
     }
     @media all and (max-aspect-ratio: 1/1) {
         background-image: url(../../images/front.jpg);
     }
 }

我刚才发现编译后的结果是：

@media all and (min-aspect-ratio: 1) {
  main #page_back { background-image:url(../../images/front.jpg); }
}
@media all and (max-aspect-ratio: 1) {
  main #page_back { background-image:url(../../images/front.jpg); }
}

但在浏览器中它看起来像这样：

@media not all {
    main #page_back {
         background-image: url("../../images/front.jpg");
    }
}
@media not all {
    main #page_back {
        background-image: url("../../images/front.jpg");
    }
}

这解释了为什么我没有看到任何图像，但为什么有不，为什么我的病情消失了？

修改

我正在做更多的研究：

我创建了这个js小提琴，看看我的浏览器是否可以处理媒体查询 http://jsfiddle.net/jnd4f8jd/ 有效！
我在项目运行期间在浏览器中更改了错误的mediaquery css以查看它是否可以手动运行：失败！
我拿出所有其他css文件以确保问题不是来自任何其他css来源：它失败了！
尝试了其他媒体查询（最小宽度）有效！

- ＆GT;这个特定的媒体查询（宽高比）似乎有问题但它不能成为一个浏览器问题，因为jsfiddle就像预期的那样工作。 什么可能会导致＆＃39;长宽比＆＃39;问题吗

Answer 1

Could you get round this problem by using Jquery to apply the CSS rather than media queries? Something like this might do the job?

$(document).ready(function() {
    var ViewHeight = $(window).height();
    var ViewWidth = $(window).width();
    var AspectRatio = ViewHeight/ViewWidth;
    if (AspectRatio < 1){
        $("#page_back").css("background-image", "url(../../images/front.jpg)");
    } else {
        $("#page_back").css("background-image", "url(../../images/front.jpg)");
    }
});

Media Queries问题与浏览器有关

1 个答案: