以2种不同的屏幕大小加载不同的Javascript函数

我有一个3x3全屏幕，响应网格，高度通过JS设置。然后当你缩小到800px时，我希望网格调整到2x3。以下是不同屏幕尺寸下网格的图片：

我通过CSS设置了媒体查询，但我还必须更改div的height函数，以获取windowHeight并将其除以3，而不是windowHeight/2以获得更大的屏幕尺寸。以下是必要的JS：

(function() {
  var $serviceBox6 = $('.js-service-box6');
  var $serviceBox5 = $('.js-service-box5');
  var $serviceBox4 = $('.js-service-box4');
  var $serviceBox3 = $('.js-service-box3');
  var $serviceBox2 = $('.js-service-box2');
  var $serviceBox1 = $('.js-service-box1');

  $(document).ready(function() {
      function setHeight() {
        windowHeight = $(window).innerHeight();
        $intro.css('min-height', windowHeight);
        $about.css('min-height', windowHeight);
        $nav.css('min-height', windowHeight);
        $services.css('min-height', windowHeight);
        $contact.css('min-height', windowHeight);
        $contactLeft.css('min-height', windowHeight);
        $contactRight.css('min-height', windowHeight);
        $map.css('min-height', windowHeight);
        $serviceBox1.css('min-height', windowHeight/2);
        $serviceBox2.css('min-height', windowHeight/2);
        $serviceBox3.css('min-height', windowHeight/2);
        $serviceBox4.css('min-height', windowHeight/2);
        $serviceBox5.css('min-height', windowHeight/2);
        $serviceBox6.css('min-height', windowHeight/2);
      };
    setHeight();

    if (document.documentElement.clientWidth <= 800) {
        $(document).ready(function() {
          function setHeight() {
            windowHeight = $(window).innerHeight();
            $contactLeft.css('min-height', windowHeight/2);
            $contactRight.css('min-height', windowHeight/2);
            $map.css('min-height', windowHeight/2);
            $serviceBox1.css('min-height', windowHeight/3);
            $serviceBox2.css('min-height', windowHeight/3);
            $serviceBox3.css('min-height', windowHeight/3);
            $serviceBox4.css('min-height', windowHeight/3);
            $serviceBox5.css('min-height', windowHeight/3);
            $serviceBox6.css('min-height', windowHeight/3);
          };
          setHeight();
        });
    }

    $(window).resize(function() {
      if ($(window).width)

      setHeight();
    });
  });
})();

当我将屏幕缩小到800px时，这一点就起作用了，但如果我将屏幕缩小到800px以上，除非刷新页面，否则不会恢复到3x3网格。同样，如果我从800px开始，2x3网格出现，然后当我向上缩放宽度时，会出现3x3网格，但如果我向下缩放到800px以下，则不会返回2x3网格。当用户调整800px以下和800px以上的屏幕宽度时，如何使网格在两个网格之间重新调整

---

非常感谢您的帮助

加载文档时，您似乎正在设置setHeight。然后，当宽度小于800时，就将该函数更改为较小的版本。但是，即使它大于800，您也不会将其更改回原来的值。它只检查文档是否低于或等于800，并在更改文档时进行更改。较大版本的setHeight仅在开始时分配给该功能

所以试着在你的第一个if语句下面添加这个

else if (document.documentElement.clientWidth > 800) {
    $(document).ready(function() {
      function setHeight() {
        windowHeight = $(window).innerHeight();
    $intro.css('min-height', windowHeight);
    $about.css('min-height', windowHeight);
    $nav.css('min-height', windowHeight);
    $services.css('min-height', windowHeight);
    $contact.css('min-height', windowHeight);
    $contactLeft.css('min-height', windowHeight);
    $contactRight.css('min-height', windowHeight);
    $map.css('min-height', windowHeight);
    $serviceBox1.css('min-height', windowHeight/2);
    $serviceBox2.css('min-height', windowHeight/2);
    $serviceBox3.css('min-height', windowHeight/2);
    $serviceBox4.css('min-height', windowHeight/2);
    $serviceBox5.css('min-height', windowHeight/2);
    $serviceBox6.css('min-height', windowHeight/2);
      };
      setHeight();
    });
}

---

看起来您的函数嵌套有问题。的部分请尝试以下内容，注意这是您的待办事项：

---

此外，使用最小高度CSS有什么问题吗？你可能想直接使用height。

通常，当我看到JS中指定了大量CSS时，我想知道min height:calc100%/2是否无法处理这些问题……我认为这应该是CSS问题，你可以使用引导网格系统来解决它。这要容易得多@丹达维斯：谢谢你的帮助。我曾考虑删除JS，转而使用CSS计算，但担心浏览器支持会不足，但看了之后，我唯一需要担心的浏览器是IE9。如果我不能让JS解决方案工作，我可能会尝试通过CSS计算来解决这个问题。@LiJunLe谢谢你的输入！事实上，我在这个网站即将发布的页面中使用了Foundations grid system，它工作得很好，但对于最终的网站，我们正在重用以前网站的一些代码，所以这不是一个真正的选项。嗨，Arrowsmith，谢谢你的帮助！我试着向总理问好，谢谢你的帮助！我尝试了你的解决方案，如果我开始屏幕宽度低于800px，然后缩放到800px以上，它会根据需要转到3x3网格。但是，如果我回到800px以下，它不会变回2x2网格。另外，如果我在800px以上开始缩小屏幕宽度，在800px以下缩小屏幕宽度，它不会切换到2x2网格。啊，是的。我在工作日结束时试着回答，但我的大脑有点疲惫。再次感谢你的帮助，李春乐！不幸的是，上面的脚本只能在窗口大小大于800px时工作。一旦窗口调整到800px标记以下，维修箱的高度将保持与800px宽以上相同。我想我会采纳@dandavis的建议，使用CSS计算，因为浏览器支持似乎没有我想象的那么差。这样，我可以通过CSS媒体查询来确定不同的宽度。

function setHeight() {
    windowHeight = $(window).innerHeight();
    $intro.css('min-height', windowHeight);
    $about.css('min-height', windowHeight);
    $nav.css('min-height', windowHeight);
    $services.css('min-height', windowHeight);
    $contact.css('min-height', windowHeight);
    if (document.documentElement.clientWidth <= 800) {
        $contactLeft.css('min-height', windowHeight/2);
        $contactRight.css('min-height', windowHeight/2);
        $map.css('min-height', windowHeight/2);
        $serviceBox1.css('min-height', windowHeight/3);
        $serviceBox2.css('min-height', windowHeight/3);
        $serviceBox3.css('min-height', windowHeight/3);
        $serviceBox4.css('min-height', windowHeight/3);
        $serviceBox5.css('min-height', windowHeight/3);
        $serviceBox6.css('min-height', windowHeight/3);
    } else {
        $contactLeft.css('min-height', windowHeight);
        $contactRight.css('min-height', windowHeight);
        $map.css('min-height', windowHeight);
        $serviceBox1.css('min-height', windowHeight/2);
        $serviceBox2.css('min-height', windowHeight/2);
        $serviceBox3.css('min-height', windowHeight/2);
        $serviceBox4.css('min-height', windowHeight/2);
        $serviceBox5.css('min-height', windowHeight/2);
        $serviceBox6.css('min-height', windowHeight/2);
    }
};

$(document).ready(function() {
    var $serviceBox6 = $('.js-service-box6');
    var $serviceBox5 = $('.js-service-box5');
    var $serviceBox4 = $('.js-service-box4');
    var $serviceBox3 = $('.js-service-box3');
    var $serviceBox2 = $('.js-service-box2');
    var $serviceBox1 = $('.js-service-box1');

    function setHeight() {
        var windowHeight = $(window).innerHeight();
        if (windowHeight <= 800) {
            var serviceBoxHeight = windowHeight / 3;
            var mapHeight = windowHeight / 2;
            var contactHeight = windowHeight / 2;
        } else {
            var serviceBoxHeight = windowHeight / 2;
            var mapHeight = windowHeight;
            var contactHeight = windowHeight;
        }

        // TODO modify the following height according to windowHeight
        $intro.css('min-height', windowHeight);
        $about.css('min-height', windowHeight);
        $nav.css('min-height', windowHeight);
        $services.css('min-height', windowHeight);

        $contact.css('min-height', contactHeight);
        $contactLeft.css('min-height', contactHeight);
        $contactRight.css('min-height', contactHeight);
        $map.css('min-height', mapHeight);

        $serviceBox1.css('min-height', serviceBoxHeight);
        $serviceBox2.css('min-height', serviceBoxHeight);
        $serviceBox3.css('min-height', serviceBoxHeight);
        $serviceBox4.css('min-height', serviceBoxHeight);
        $serviceBox5.css('min-height', serviceBoxHeight);
        $serviceBox6.css('min-height', serviceBoxHeight);
    };

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