[英]Media Queries issue with browser
I want to load different background pictures depending on the aspect-ratio. 我想根据宽高比加载不同的背景图片。 I'm using LESS css.
我正在使用LESS CSS。 The problem is, that I don't get any background-image at all and I can't figure out the problem.
问题是,我根本没有任何背景图像,也无法弄清问题。
(I know that the css at the moment is nonsense. I was trying to simplyfie my code to get it to work but I couldn't) (我知道目前的CSS是胡说八道。我试图简单地编入代码以使其正常工作,但我做不到)
This is the LESS css part with the mediaqueries: 这是带有媒体查询的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);
}
}
I just figured out that the compiled result is: 我刚刚发现编译结果是:
@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); }
}
But in the browser it looks like this: 但是在浏览器中看起来像这样:
@media not all {
main #page_back {
background-image: url("../../images/front.jpg");
}
}
@media not all {
main #page_back {
background-image: url("../../images/front.jpg");
}
}
That explains why I don't see any image BUT why is there a not and why is my condition disappeared? 这解释了为什么我没有看到任何形象,但为什么有没有 ?为何我的条件消失?
EDIT 编辑
I was doing some more research: 我正在做更多研究:
--> It seems to be a problem with this specific media query (aspect-ratio) But it can not be a browser problem because the jsfiddle works as aspected. ->这个特定的媒体查询(aspect-ratio)似乎是一个问题,但是它不可能是浏览器的问题,因为jsfiddle是按方面工作的。 What could cause a 'aspect-ratio' problem?
什么会导致“长宽比”问题?
Could you get round this problem by using Jquery to apply the CSS rather than media queries? 您可以通过使用Jquery应用CSS而不是媒体查询来解决此问题吗? 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)");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.