Question

尝试检查窗口的高度（每次调整窗口大小），如果该高度小于<540px，请在类上添加一个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（每次窗口调整大小时）

1 个答案: