添加一个css when the height on window smaller（每次window resize）

Question

尝试检查 window 的高度（每次 window 调整大小），如果小于 < 540px，则在 [=24] 上添加 css =].但为什么它不起作用？我的 jquery 有问题吗？？

$( window ).resize(function() {
var windowh = $(window).height();

if (windowh < 540 ) {
    $(".theclass").css('height', '200px');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

对于你的问题有两种解决方法

和CSS

/* OLD CSS*/
.theclass { 
    text-align: right;
    background: lightgray;
}

/* Solution*/
@media (max-height: 540px) {
  .theclass {
    height: 200px;
  }
}

<div class="theclass">
  Full Screen View ↑
</div>

有JS

$( window ).on('load resize',function() { //<-- Change to load,resize
  var windowh = $(window).height();

  if (windowh < 540 ) {
      $(".theclass").css('height', '200px');
  }
});//<-- You forgot close `});`

/* OLD CSS*/
.theclass { 
    text-align: right;
    background: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="theclass">
  Full Screen View ↑
</div>

添加一个css when the height on window smaller（每次window resize）

Add a css when the height on the window smaller (everytime the window re-size)

jquery

window-resize