在常規屏幕上自動調整后，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%');
    } 
});

同樣，如果您希望更改是動態的，則需要在window元素的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%');
        } 
    });
});