javascript - div 的响应高度 : shrink to a breakpoint then start growing again

Question

我正在使用英雄部分来显示一些内容。它使用 padding-bottom 百分比技术和内部绝对定位容器来居中内容进行响应。

现在要注意的是:达到断点，假设768px，在较小的窗口尺寸上，我希望盒子再次开始增长。

我在网络上发现了一些 js/jQuery 代码，并且能够获得结果，但只有在窗口 <768px 时加载页面时它才有效。在这种情况下，它的效果非常好。但是，如果页面在较大的窗口中加载，低于 768 像素的大小调整就会丢失。

这是 html:

<div class="row row-home-hero" id="hero">
    <div class="cont">
        <h1>Title</h1>
        <h2>Subtitle</h2>
        <div class="cta-hero-home">
            <a href="#" class="cta-hero-link">» CTA1</a>
            <span class="cta-hero-spacer">or</span>
            <a href="#" class="cta-hero-link">» CTA2</a>
        </div>
    </div>
</div>

这是 JS。这是一团糟，因为它是来自不同来源的混合体。我使用的是 Wordpress，所以我必须用 jQuery 替换一些 $。请原谅我:)

function screenClass() {
    if(jQuery(window).innerWidth() < 768) {
        jQuery('.row-home-hero').addClass('small-hero');
    } else {
        jQuery('.row-home-hero').removeClass('small-hero');
        jQuery('.row-home-hero').css("height", "");
    }
}

// Fire.
screenClass();

// And recheck if window gets resized.
jQuery(window).bind('resize',function(){
    screenClass();
});
if (document.documentElement.clientWidth < 768) {
    var $li = jQuery('.small-hero'),         // Cache your element
    startW = $li.width();  // Store a variable reference
    function setMarginDiff() {
    area = 500000;
    width = jQuery('.small-hero').width();
    jQuery('.small-hero').height(Math.ceil(area/width/1.7));
    }
    setMarginDiff();                 // Do on DOM ready
    jQuery(window).resize(setMarginDiff); // and on resize
}

这是 CSS

.row-home-hero {
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-color: red;

}
.row-home-hero:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 46%;
}
.row-home-hero .cont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    text-align: center;
}
a.cta-hero-link {
    display: block;
    width: 100px;
    max-width: 80%;
    line-height: 40px;
    background: white;
    color: #1b9fdd;
    text-transform: uppercase;
    text-decoration: none;
    margin: 10px auto;
    text-align: center;
    font-weight: 500;
    box-shadow: 0px 0px 7px 1px rgba(0,0,0,.4);
}

@media screen and (max-width: 768px) {
    .row-pre-footer .cont div {
        width: 100%;
        padding: 0 5%;
        float: none;
        margin: 0 auto 30px;

    }
    .progetto-footer, .loghi-footer {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 30px;
        float: none;
    }
    .double-box .tib-tab {
        float: none;
        width: 90%;
        margin: 5% auto;
        padding-bottom: 90%;
    }
    .tib-box h2, .tab-box h2 {
        font-size: calc(28px + (46 - 28) * (100vw - 320px) / (768 - 320));
        margin-bottom: 18vw;
    }
    .double-box-inner p {
        font-size: 22px;
        line-height: 30px;
    }
    .row-home-hero.small-hero {
        height: 500px;
    }
    .row-home-hero:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: 0;
    }
}

And this is a working demo

谢谢!

Answer 1

我移动了if (document.documentElement.clientWidth < 768) { block 在调整大小事件内。这样每当调整窗口大小时就会调用它。

在原始版本中，只有在页面加载时才会调用它(并且仅当屏幕小于 768 时)。通过此调整，调整大小时将始终重新检查。

我还将您的所有代码合并到一个较小的函数中。

var breakpoint = 768
var area = 500000
var target = $('.row-home-hero')

$(window).bind('resize', function() {
  if(window.innerWidth < breakpoint) {
        var width = target.width()
        target.addClass('small-hero')
        target.height(Math.ceil(area / width / 1.7))

    } else {
        target.removeClass('small-hero')
        target.css('height', '')
    }
})
.trigger('resize')