媒体查询问题与浏览器

我想根据纵横比加载不同的背景图片。我正在使用LESS css。问题是，我没有得到任何背景图像，我无法弄清楚这个问题。媒体查询问题与浏览器

（我知道，此刻的CSS是废话，我试图simplyfie我的代码来得到它的工作，但我不能。）

这是LESS CSS部分与mediaqueries：

#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摆弄，看看我的浏览器是否能够处理mediaquery http://jsfiddle.net/jnd4f8jd/它的工作原理！
我在项目的运行时期间在浏览器中更改了错误的mediaquery css，看看它是否会手动工作：它失败！
我拿出所有其他的CSS文件，以确保问题不是来自任何其他的CSS源：它失败！
尝试了其他媒体查询（最小宽度）它的工作原理！

- >这似乎是与此特定媒体查询（宽高比）一个问题，但因为工作的jsfiddle作为aspected它不可能是一个浏览器的问题。 什么可能导致“长宽比”问题？

来源

2015-10-31 Martin

我不知道任何Less编译器可以做这样的转换到'not all'，所以它很可能是您的构建链中存在此问题的其他工具（缩小器？）。 –

编译结果看起来像预期的那样，编译结果似乎很有用。但如果我检查浏览器中的媒体查询（FF，Chrome上的Linux），我看到这个：并非所有... – Martin

你可以通过使用jquery来应用CSS而不是媒体查询来解决这个问题吗？像这样的东西可能会完成这项工作？

$(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)"); 
    } 
});

来源

2015-11-12 11:25:33

我没有尝试你的解决方案，因为我已经解决了我的问题，通过使用background-size和我的优化版本背景图。但是你的方法很可能会工作，因为我在其他项目中使用了类似的方法！ – Martin

媒体查询问题与浏览器

回答

相关问题