divの応答の高さ：ブレークポイントまで縮小してからもう一度増加し始めます

Question

私はヒーローセクションを使用してコンテンツを表示しています。 padding-bottomパーセントのテクニックと、コンテンツを中央に配置するための内側の絶対配置されたコンテナを使用すると反応します。

今すぐcatch：ブレークポイントに達すると、768pxと言いましょう。ウィンドウのサイズが小さくなると、ボックスの再成長が始まります。

私はウェブの周りにいくつかJS/jQueryのコードを発見し、その結果を得ることができたが、窓が< 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 
} 

を許してくださいそして、これは

.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

おかげCSSです！

Answer 1

if (document.documentElement.clientWidth < 768) {ブロックをresizeイベント内に移動しました。ウィンドウがサイズ変更されるたびに呼び出されるようにします。

元のバージョンでは、ページが読み込まれたときにのみ呼び出されます（画面が768より小さい場合のみ）。この調整では、サイズ変更時に常に再チェックされます。

また、すべてのコードを1つの小さな関数にマージしました。

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')