如果屏幕宽度小于960像素,则将屏幕宽度添加到类中

时间:2017-04-04 18:30:03

标签: javascript jquery html css screen

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

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

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

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

上面的代码不起作用,你能看一下吗? THX!

5 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

尝试使用jQuery

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

这样你也可以在调整大小的同时不断检查窗口的宽度。

答案 2 :(得分:1)

如果您不必使用javascript

,也可以使用CSS和媒体查询执行此操作
@media (max-width: 960px) {
  .reverse {
    width: 100vw;
  }
}

答案 3 :(得分:0)

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

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

如果您添加了事件管理,请小心,因为它会激发很多,最好不要每次强制重新流动 - 查看单独的问题。

指向调整大小https://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

的可能去抖动的链接

答案 4 :(得分:0)

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

你没有初始化w