Question

我确实有下面的查询，没有任何问题，工作正常。当我在资源管理器中打开它时，它正在改变背景图像。当我改变分辨率时它不会自动改变背景图像我需要刷新页面来改变背景图像。我想在更改屏幕分辨率时立即更改它。

请帮忙......

<script type="text/javascript">
document.onload=pickIt()
function pickIt()
{
    var w=screen.width
    var h=screen.height
    if(w==1440&&h==900)
    {
    //alert("1440x900");
    document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1440x900.png')";
    }
    else if(w==1280&&h==800)
    {
    //alert("1280x800")
    document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
    } else if(w==1280&&h==768)
    {
    //alert("1280x768")
    document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
    } else if(w==1280&&h==720)
    {
    //alert("1280x720")
    document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
    }
}
</script>

Answer 1

为什么不简单地document.getElementsByTagName('body')[0].onresize=pickIt？

Answer 2

您可以使用媒体查询。兼容性仍然不是最好的，但它正在增长：http://caniuse.com/#feat=css-mediaqueries

@media (max-width: 1200px) and (max-height:600px) {
    html {
        background: url(http://lorempixel.com/1200/600);
    }
}
@media (max-width: 900px) and (max-height:500px) {
    html {
        background: url(http://lorempixel.com/900/500);
    }
}
@media (max-width: 700px) and (max-height:500px) {
    html {
        background: url(http://lorempixel.com/700/500);
    }
}
@media (max-width: 500px) and (max-height:300px) {
    html {
        background: url(http://lorempixel.com/500/300);
    }
}

演示：http://jsfiddle.net/32X57/

根据屏幕分辨率更改背景图像

2 个答案: