javascript - div的响应高度:缩小到断点，然后再次开始增长

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

现在要注意的是：达到一个断点，例如768px，并且在较小的窗口尺寸上，我希望该框重新开始增长。

我在网络上发现了一些js / jQuery代码，并能够得到结果，但是只有当窗口
这是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

谢谢！

最佳答案

我将if (document.documentElement.clientWidth < 768) {块移到了resize事件中。这样，无论何时调整窗口大小，它都会被调用。

在原始版本中，只有在加载页面时（并且仅当屏幕小于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')