jquery - 试图根据屏幕分辨率显示不同的背景图像？

Question

我遇到了一个问题。我正在尝试根据屏幕分辨率加载不同的图像，但我尝试了下面列出的代码，但它没有加载背景。说的时候我有一个 css 和 jquery 设置，但背景没有显示。我不知道我哪里出错了？

@media (min-width:800px) { .w800 { background-image: url(images/DCBG800.png);                      @media (min-width:1024px) { .w1024 { background-image: url(images/DCBG1024.png);
@media (min-width:1152px) { .w1152 { background-image: url(images/DCBG1152.png);
@media (min-width:1280px) { .w1280 { background-image: url(images/DCBG1280.png);
@media (min-width:1360px) { .w1360 { background-image: url(images/DCBG1360.png);
@media (min-width:1366px) { .w1366 { background-image: url(images/DCBG1366.png);
@media (min-width:1600px) { .w1600 { background-image: url(images/DCBG1600.png);
}

   <script type="text/javascript">
   function setImageClass() {
switch(true) {
    case($(window).width()>1600): $("body").removeClass("w800 w1024 w1152 w1280 w1360 w1366").addClass("w1600");
    break;
    case($(window).width()>1366): $("body").removeClass("w800 w1024 w1152 w1280 w1360 w1600").addClass("w1366");
    break;
    case($(window).width()>1360): $("body").removeClass("w800 w1024 w1152 w1280 w1366 w1600").addClass("w1360");
    break;
    case($(window).width()>1280): $("body").removeClass("w800 w1024 w1152 w1360 w1366 w1600").addClass("w1280");
    break;
    case($(window).width()>1152): $("body").removeClass("w800 w1024 w1280 w1360 w1366 w1600").addClass("w1152");
    break;
    case($(window).width()>1024): $("body").removeClass("w800 w1152 w1280 w1360 w1366 w1600").addClass("w600");
    break;
    default: $("body").removeClass("w1024 w1152 w1280 w1360 w1366 w1600").addClass("w800");
    break;
}
   }

    $(document).ready(function() {
setImageClass();
    });

    $(window).resize(function() {
setImageClass();
    });

Answer 1

您没有关闭 CSS 示例中的任何大括号。此外，尝试摆脱“body”上的所有类(即现在也是 javascript)，并将 background-image css 规则直接应用于“body”元素选择器，如下所示:

@media (min-width:800px) { 
   body {
       background-image: url(images/DCBG800.png); 
   }
}

希望对你有帮助

卢克斯