我想根据宽高比加载不同的背景图片。我正在使用 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 fiddle 来查看我的浏览器是否可以处理媒体查询 http://jsfiddle.net/jnd4f8jd/ 有效!
- 我在元素运行期间在浏览器中更改了错误的媒体查询 css,以查看它是否可以手动运行:失败!
- 我取出所有其他 css 文件以确保问题不是来自任何其他 css 源:它失败了!
- 尝试了其他媒体查询(最小宽度)有效!
--> 好像是这个特定的媒体查询(aspect-ratio)有问题 但这不可能是浏览器问题,因为 jsfiddle 按方面工作。 什么会导致“纵横比”问题?
最佳答案
你能通过使用 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)");
}
});
关于html - 浏览器的媒体查询问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33452267/