取决于窗口高度的 jQuery 字体大小编辑

Question

当浏览器的窗口也较小时，我试图使字体大小更小，但它不起作用......我也试图使一些 div 更小，但它也不起作用......可以你帮我？无论如何，Chrome 不会写任何错误... 这是我的代码:

jQuery:

if($(window).width() < 720 ) {
    $('.menulink').height(7);
    $(".middlepagediv" && ".leftoverdiv" && ".leftdiv" && ".rightoverdiv" && ".rightdiv").height('480px');
    }
else if($(window).width() > 720 < 1440 ) {
    $(".middlepagediv" && ".leftoverdiv" && ".leftdiv" && ".rightoverdiv" && ".rightdiv").height('1020px');
}

HTML:

<nav>
<ul class="mmenu">
<li onclick="onas()"><div class="menulink">O nás
</div></li><li onclick="produkty()"><div class="menulink">Produkty
</div></li><li onclick="aplikace()"><div class="menulink">Aplikace
</div></li><li onclick="sluzby()"><div class="menulink">Služby
</div></li><li><div class="menulink inactive"><a href="/downloads/content.htm" class="inactive">Ke stažení</a></div></li><li><div class="menulink inactive"><a href="/News/content.htm" class="inactive">Novinky</a></div></li><li><div class="menulink"><a href="/about/contacts/content.htm" target="maincnt">Kontakty</a></div></li></ul>
<br>
<div class="overline">
<ul id="lower"><li><p class="menulink"><a href="/about/about/content.htm" target="maincnt">O nás</a></p></li><li><p class="menulink"><a href="/about/reference/content.htm" target="maincnt">Reference</a></p></li><li><p class="menulink"><a href="/about/contacts/content.htm" target="maincnt">kontakty</a></p></li></ul>
</div>
</nav>

Answer 1

尝试

window.addEventListener( 'resize', function( event ) {

ect 在每次窗口大小变化期间触发。示例:

window.addEventListener('resize', function(event) {
  if ($(window).width() < 720) {
    $('.menulink').css('font-size', '7em');
    $(".middlepagediv, .leftoverdiv, .leftdiv, .rightoverdiv, .rightdiv").css('font-size', '4em');
  } else if ($(window).width() > 720 < 1440) {
    $(".middlepagediv, .leftoverdiv, .leftdiv, .rightoverdiv, .rightdiv").css('font-size', '2em');
  }
}, false);

.menulink {
  font-size: 3em;
}
.middlepagediv {
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="menulink">Menu Link</p>
<p class="middlepagediv">Mid Page</p>