изменить размер Div на основе размера экрана с помощью JQuery

Question

Что не так в моем jquery? Я хотел бы сделать мой div больше в зависимости от размера экрана, и есть много хороших примеров, но до сих пор нет успеха.

var screenWidth = screen.width; 
    if (screenWidth < 1024) { 

     $(".gadgetblockLeft1").css("width","40%"); 
    } else { 
     $(".gadgetblockLeft1").css("width","100%"); 
    } 

и CSS до сих пор: -

.gadget .gadgetblockLeft1 { padding:5px; background-color:#f4f4f4; border:1px solid #cfcfcf; font-family:Tahoma, Geneva, sans-serif; font-size:12px; text-align:right; direction:rtl; margin-left:5px; height:auto; float:left} 

мне нужно, когда экран изменения в 900px или меньше, чем 900px он добавит этот код width:100% в класс .gadgetblockLeft1

Answer 1

Попробуйте это:

$(window).resize(function() {   
    if ($(window).width() <= 900) { 
     $(".gadget .gadgetblockLeft1").css("width","100%"); 
    } 
    }); 

Answer 2

Возможно, вы захотите использовать мультимедийный запрос:

.gadgetblockLeft1 { width: 40%; } 
@media (min-width: 1024px) { .gadgetblockLeft1 { width: 100%; } } 

Этот подход имеет то преимущество, что при изменении ширины экрана он будет автоматически делать правильные изменения из-за изменения размера окна.