jQuery 창 크기 조정 및 Google 크롬

Question

메뉴의 크기 조정과 관련된 문제를 해결할 수 없습니다. 게시 할 코드는 Chrome에서만 작동하지 않습니다.

단어로 설명하기 어려운 상황이므로 문제의 스크린 샷을 보여 드리겠습니다.

이 내 메뉴입니다이 개막식에서 보이는 : 나는 브라우저의 창 < = 605px의 크기를 조정하면

는 jQuery 코드는 부동 왼쪽을 제거, 그래서 항목은 컬럼에 넣고 집중되어 . (죄송합니다. 2 개 이상의 링크를 게시 할 수 없습니다.)

크기를 조정하면 605가 첫 번째 이미지처럼 보일 것입니다. (즉, ie와 firefox에서 실제로 작동합니다.) 크롬에서는 다음과 같이 표시됩니다.

여기에 코드입니다.

HTML :

<div id="containerMenu"> 

    <div id="menu"> 

     <ul> 

      <a href="index.html"><li>HOME</li></a> 
      <li>SERVIZI</li> 
      <a href="wedding.html"><li>WEDDING</li></a> 
      <a href="food.html"><li>FOOD</li></a> 
      <a href="contatti.html"><li>CONTATTI</li></a> 

     </ul> 

    </div> 

</div> 

CSS (단지 유용한 것들) :

#containerMenu {width:100%; 
    text-align:center;} 

#menu {display:inline-block} 

#menu li {float: left;} 

jQuery를 : 물론

$(window).resize(function() 
    { 
    if($(window).innerWidth() <= 605) 
     { 
     $("li", $("#menu")).css("float","none") 
     } 

    else 
     {     
     $("li", $("#menu")).css("float","left") 
     }     
    }) 

나는 경우에도 일어날 수 있도록하는 코드를했습니다 창은 크기가 조정되지 않고 폭이 < = 605 인 경우에만 열리지 만 위의 것과 정확히 같습니다. .resize() 이벤트없이.

이 코드를 Google 크롬과 호환되도록 만들 수 있습니까? 당신이 jQuery로 이런 종류의 일을 처리 할 수 ​​있지만

이 스테파노

Answer 1

을 주셔서 감사합니다, 당신의 CSS에 media query를 추가하는 것이 훨씬 더 간단 할 것이다. 비슷한 것

/* Your normal css */ 
#containerMenu { 
    width:100%; 
    text-align:center; 
} 
#menu { 
    display:inline-block 
} 
#menu li { 
    float: left; 
} 

/* Media query */ 
@media (max-width: 605px) { 
    #menu li { 
     float: none; 
    } 
} 

이것은 모든 브라우저에서 원활하게 작동합니다. 배후에서 무슨 일이 벌어지고있는 것 : 당신은 브라우저에 메뉴에 대한 목록 항목을 float: left으로 지정한다고 말하고 있습니다. 그러나 그 후에 max-width이 605px 인 예외를 추가합니다. 즉, 브라우저 창이 605px 이하인 경우 실제로는 메뉴의 목록 항목을 float: none으로 지정합니다. 그것은 당신이 당신의 JavaScript를하기를 바라는 것에 대한 나의 이해에 관한 것입니다.

미디어 쿼리는 Responsive Web Design의 기초 중 하나입니다.