添加屏幕寬度的一類，如果屏幕寬度小於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; 
    } 
}