($ (window) .width()로 jquery 조건을 다시로드해야합니다.

Question

($ (window) .width()를 사용하여 Jquery if else 조건을 사용하고 있습니다. 조건이 자동으로 적용되지 않고 나는 조건을 적용하려면 브라우저를 다시로드해야합니다. 내가 브라우저 크기를 조정할 때 부드러운 CSS 미디어 쿼리 모두 변화를 얻을하는 데 도움이 될 것입니다 무엇.

jQuery(document).ready(function($) { 
 

 
    if ($(window).width() < 767) { 
 
     $('p').removeClass('blue'); 
 
     $('p').addClass('green'); 
 
    } 
 
    else { 
 
     $('p').addClass('red'); 
 
     $('p').removeClass('blue'); 
 
    } 
 
    
 

 
});

.red { 
 
    color: red; 
 
} 
 

 
.green { 
 
    color: green 
 
} 
 

 
.blue { 
 
    color: blue 
 
}

<p class="blue">Hello World</p> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Fiddle

,

Answer 1

다음 코드

jQuery(document).ready(function() { 
    Responsive(); 
}); 

$(window).resize(function() { 
    Responsive(); 
}); 

function Responsive(){ 
    if ($(window).width() < 767) { 
     $('p').removeClass('blue'); 
     $('p').addClass('green'); 
    } 
    else { 
     $('p').addClass('red'); 
     $('p').removeClass('blue'); 
    } 
}