Jquery在自定義屏幕上自動調整後，不會在較小的屏幕上更改div的寬度

Question

獲取根據子項數量自動調整子div寬度的腳本。而在較小的屏幕上，我需要它們100％的寬度。我已經嘗試將腳本插入腳本，並在普通屏幕上調整寬度。不起作用。還嘗試將其插入頁面的最底部。沒有工作。

下面是代碼

$(".basecollections").each(function(){ 
var child_width = 100/$(this).children().length; 
    child_width = Math.floor(child_width); 
$(this).children().css("width", child_width + "%"); 
    if (screen.width < 1000) { 
    $(this).children().css('width','100%'); 
    } 
}) 

http://jsfiddle.net/3x466nb1/

Answer 1

，而不是screen.width你需要使用$(window).width()：DEMO

$(".basecollections").each(function(){ 
    var child_width = 100/$(this).children().length; 
    child_width = Math.floor(child_width); 
    $(this).children().css("width", child_width + "%"); 
    if ($(window).width() < 1000) { 
     $(this).children().css('width','100%'); 
    } 
}); 

此外，如果你想改變是動態的，你需要在resize事件中編寫這段代碼窗口元素：

$(window).resize(function(){ 
    $(".basecollections").each(function(){ 
     var child_width = 100/$(this).children().length; 
     child_width = Math.floor(child_width); 
     $(this).children().css("width", child_width + "%"); 
     if ($(window).width() < 1000) { 
      $(this).children().css('width','100%'); 
     } 
    }); 
});