javascript - 等高和媒体查询

Question

我对我遇到的等高问题感到困惑，你可以在这个 fiddle 中看到:FIDDLE

代码:

$(document).ready(function() {
    if ($(window).width() > 768) {
    $(window).ready(function() {
        var mainHeight = $('.main').height();
        $(".block-wrap").height(mainHeight);
    });
    }else{
        $('.block-wrap').css('height','auto');
        }
});

    $(document).ready(function() {
        if ($(window).width() > 768) {
        $(window).resize(function() {
            var mainHeight = $('.main').height();
            $(".block-wrap").height(mainHeight);
        });
        }else{
            $('.block-wrap').css('height','auto');
            }
    });

基本上，我希望“block-wrap”获得“main”div 的高度。它一直有效，直到我使用媒体查询.. 'block-wrap' 仍然从 'main' div 获取高度，而我想将它的高度设置为自动，就像我在 javascript 中尝试的那样。

如果我刷新页面而不是调整大小，它可以在 768px 下工作。

Answer 1

嗯，您的 JavaScript 代码有很多问题，包括它被输入了两次 (?)。这是我所做的更改:

• 删除了重复项。

• 将所有内容包装在单个 $(document).on("ready", callback); 事件处理程序中。

• 添加了一个 resize 事件监听器，以便在用户调整屏幕大小时更新您的 .block-wrap div 高度。如果没有它，高度 只会在页面加载时发生变化，但如果用户更改窗口大小时则不会。

更新:

• 在 resize 事件处理程序之后调用 resize(); 函数来调整 .block-wrap div 加载页面后。

请注意，您可以在不依赖 JavaScript 的情况下通过使用 CSS 来实现此结果。

这是经过优化和工作的最终代码:

$(document).ready(function () {
    function resize() {
        if (window.innerWidth >= 768) {
            var mainHeight = $('.main').height();
            $(".block-wrap").css({
                "height": mainHeight
            });
        } else {
            $('.block-wrap').css({
                'height': 'auto'
            });
        }
    }
    resize();
    $(window).on("resize", function () {
        resize();
    });
});

并且我将您的媒体查询 max-width 条件调整了一个像素:

@media only screen and (max-width: 768px) { ... }

---

演示: