JQuery와 창 너비 조건

Question

나중에 편집 : 나는이 시도했다 : 나는 800 아래의 창 크기를 조정하면

$(document).ready(function() { 
if ($(window).width() > 800) { 
    $("#header").hide(); 
} 
else { 
$("#header").show(); 
} 

}); 

헤더는 여전히 보이지 않습니다. 무엇이 문제입니까? 윈도우가 800보다 큰 경우 다른 함수를 실행하고 싶기 때문에 CSS 미디어 쿼리를 사용할 수 없습니다.

Answer 1

Javascript에서 JQuery로 이것을 수행하려면, 다음 두 가지를 알고 싶을 것입니다. 현재 너비는 얼마이고 사용자가 크기를 조정 한 후 너비는 얼마입니까? 당신은 아마 다음과 같은 형태의 코드해야합니다 :

function checkSize(){ 
    if ($(window).width() > 1200){ 
    //do whatever 
    } 
} 

//When the page is loaded 
$(document).ready(function(){ 
    //Add a listener to check the size of the document when you load 
    $(document).resize(checkSize); 

    //Check the size now. 
    checkSize(); 
}); 

또는, 당신은 페이지가 특정 크기 때 CSS를 조정하기 위해 CSS 미디어 쿼리를 사용 할 수 있지만, 어떤 자바 스크립트를 실행하지 않습니다. 다음은 예입니다 :

@media all and (max-width: 1199px) { 
    #header{ 
    display:none; 
    } 
} 

이 좀 더 도움이 예제와 설명이 있습니다 기본적으로 내가하고 싶은 것을 http://css-tricks.com/css-media-queries/