화면 너비를 통한 감지 및 변경이 작동하지 않습니다.

Question

따라서 Do something if screen width is less than 960 px을 확인하여 화면 크기가 960 미만인 경우 어떻게 실행하는지 확인하십시오 px. 그러나, 그것은 나를 위해 작동하지 않았다. 그들의 대답은 다음과 같습니다.

if ($(window).width() < 960) { 
    alert('Less than 960'); 
} 
else { 
    alert('More than 960'); 
} 

시도해 보았습니다. 나는 또한 화면 크기를 말해 준 alert을 이미 가지고있다.

var size = $(window).width(); 
alert(size); 

는이 일했다,하지만하지 않았다 :

if (size < 1200) { 
    $("#mobileVersionDetected").css("display", "block"); 
} 
else { 
    $("#mobileVersionDetected").css("display", "none"); 
} 

어떤 아이디어? 차라리 그것이 작동하는 variable를 사용하는 것보다 실제 iffunction에 $(window).width()를 추가하는 경우

if (size < 1200) { 
    $('#mobileVersionDetected').attr("style", "display: block"); 
} 
else { 
    $('#mobileVersionDetected').attr("style", "display: none"); 
} 

Answer 1

:

Answer 2

이보십시오.

Answer 3

@charlietfl을 echo하는 것은 정확히 CSS Media Queries을위한 것입니다. 스크립트의 필요성을 없애고 더 효율적입니다.

/* Baseline styles applied initially: */ 
 
    body { background-color: #b200ff; /* purple */ } 
 

 
    p { 
 
     border:1px solid black; 
 
     background: white; 
 
     padding:5px; 
 
     text-align:center; 
 
     font:bold 1.2em Arial; 
 

 
    } 
 

 
    /* 
 
     When writing multiple media queries that don't explicitly 
 
     specify a range, the order of the queries matter!!! 
 

 
     For example: 
 

 
\t   With a viewport of 400px wide, both of the the following 
 
\t   two queries would apply: 
 

 
      @media screen and (max-width:400px) {...} 
 
    \t  @media screen and (max-width:600px) {...} 
 

 
\t  So, the last one would be used. \t 
 
    */ 
 

 
    /* 
 
     Note that this query uses "min-width", 
 
     not "max-width" so that it handles 
 
     all viewports bigger than 1200  
 
    */ 
 
    @media screen and (min-width: 1201px) { 
 
     body { background-color: orange; } 
 
     p:after { content: "over 1200px"; } 
 
    } 
 

 
    /* 
 
     Here, we're using "max-width" to handle 
 
     viewports up to the specified sizes: 
 
    */ 
 
    @media screen and (max-width: 1200px) { 
 
     body { background-color: yellow; } 
 
     p:after { content: "961px to 1200px"; } 
 
    } 
 

 
    @media screen and (max-width: 960px) { 
 
     body { background-color: blue; } 
 
     p:after { content: "769px to 960px"; } 
 
    } 
 

 
    @media screen and (max-width: 768px) { 
 
     body { background-color: grey; } 
 
     p:after { content: "551px to 768px"; } 
 
    } 
 

 
    @media screen and (max-width: 550px) { 
 
     body { background-color: green; } 
 
     p:after { content: "321px to 550px"; } 
 
    } 
 

 
    @media screen and (max-width:320px) { 
 
     body { background-color: red; } 
 
     p:after { content: "up to 320px wide"; } 
 
    }

<p></p>