如果屏幕宽度小于 960 像素，则将屏幕宽度添加到 class

Question

下面的代码将屏幕宽度添加到 class .reverse

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

但我希望它仅在屏幕宽度小于 960px 时这样做:

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

上面的代码无法运行，你能看一下吗？谢谢！

Answer 1

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

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

如果你添加了事件管理，要小心，因为它会触发很多，最好不要每次都强制重新流动 - 看看那个单独的问题。

A link 到调整大小的可能去抖 https://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Answer 2

我认为您正在调整 window 大小以检查此效果，因此您需要将 resize eventListener 添加到 DOM。

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

Answer 3

试试 jQuery

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

这样您就可以在调整大小时不断检查 window 的宽度。

Answer 4

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

You didn't initialize w

Answer 5

如果您不必使用 javascript

，您也可以使用 CSS 和媒体查询来执行此操作

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

如果屏幕宽度小于 960 像素，则将屏幕宽度添加到 class

Add width of the screen to a class if screen width is less than 960 px

javascript

jquery

html

css

screen