如果屏幕寬度小於960像素，則將屏幕寬度添加到類中

Question

下面的代碼將屏幕的寬度添加到類.reverse

var w = $(window).width();
 $('.reverse').css('width', w);

但我希望只有在屏幕寬度小於960px時才這樣做：

if ($(window).width() < 960) {
    $('.reverse').css('width', w);
}

上面的代碼無法正常工作，您可以看看嗎？ 謝謝！

Answer 1

我認為您正在調整窗口大小以檢查此效果，因此您需要向DOM添加調整大小的eventListener。

 $(window).on('resize',function(){
     var w=$(window).width();
    if (w< 960) {
        $('.reverse').css('width', w);
    }
    })

Answer 2

嘗試使用jQuery

$(window).resize(function(){
  var width = $(window).width();
  console.log(width);
  if (width < 960){
    $('.reverse').css('width', width);
  };
});

這樣，您就可以在調整大小的同時不斷檢查窗口的寬度。

Answer 3

如果不必使用javascript，也可以使用CSS和媒體查詢來執行此操作

@media (max-width: 960px) {
  .reverse {
    width: 100vw;
  }
}

Answer 4

var w = $(window).width();
if (w < 960) {
    $('.reverse').css('width', w);
}

注意，如果需要，請添加事件管理，但未定義w 。

如果您添加了事件管理，請小心，因為它將觸發很多事件，並且最好不要每次都強制重排-查看該單獨的問題。

可能調整大小的防反跳的鏈接https://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Answer 5

  if ($(window).width() < 960) { $('.reverse').css('width', w); } 

您沒有初始化w