Question

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

现在抓住了：达到一个断点，让我们说 768px ，在较低的窗口尺寸上，我希望盒子能够再次开始增长。

我在网络上找到了一些 js / jQuery 代码，并且能够获得结果，但只有在窗口为＆lt; 768px 时加载页面才能生效。在这种情况下，它的工作非常出色。但是如果页面被加载到一个更大的窗口中，低于768px调整大小就会丢失。

这是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) {块。因此，只要调整窗口大小，就会调用它。

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

div的响应高度：缩小到断点然后再次开始增长

1 个答案: