添加屏幕宽度的一类，如果屏幕宽度小于960像素

Question

下面的代码添加屏幕的宽度，以一流的.reverse

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

，但我希望它这样做只是如果屏幕宽度小于960像素：

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

上面的代码不起作用，您可以看一下吗？谢谢！

Answer 1

尝试使用jQuery

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

这样，你不断地检查窗口的宽度，同时调整为好。

Answer 2

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

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

如果您添加了事件管理，请注意，因为它会触发很多事情，最好不要每次都强制重新流动 - 查看单独的问题。

一个链接到一个可能的反跳为resize https://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Answer 3

我想你调整窗口中检查一下这个效果，所以你需要添加调整事件监听，到DOM。

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

Answer 4

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

你没有初始化W¯¯

Answer 5

你也可以做到这一点与CSS和媒体查询，如果你没有使用JavaScript

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