Question

我有一个3x3全屏，响应式网格，通过JS设置高度。然后，当您缩小到800px时，我希望网格调整为2x3。这是不同屏幕尺寸的网格照片： enter image description here

我通过CSS设置了媒体查询，但我还必须更改div高度的功能以取得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以下时，如何让网格在两个网格之间重新调整？

非常感谢所有帮助！

Answer 1

在加载文档时，您似乎正在设置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();
    });
}

Answer 2

看起来您的功能嵌套存在问题。＆lt; = 800的部分应该在setHeight函数内，而不仅仅是在ready函数中。然后你不需要两次调用setHeight函数。

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);
    }
};

结合其他指示：
您不应该多次调用ready函数。您可以直接接听第二个呼叫，它也可以正常工作。
您正在ready函数之外定义serviceBox变量，因此您无法保证它们具有有效值。只有将脚本放在页面底部时才能可靠地工作 - 在这种情况下，您首先不需要就绪函数。： - ）

Answer 3

试试这个，请注意，这是一个TODO ：

$(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();
    });
});

此外，使用min-height CSS的任何问题？您可能希望直接使用height。

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

3 个答案: