여러 미디어 쿼리가 무시되고 있습니다.

Question

제가 시도하려는 것은 < 800에서 1 열에서 < 640까지 1 열로 전환하는 것입니다. 첫 번째 쿼리는 인식되지만 다음 쿼리는 무시됩니다. 쿼리 장소를 바꾸면 같은 규칙이 적용됩니다. 아래에서 사용한 것에 대해서는 최대 너비 : 800px (파란색 테두리)를 볼 수 있습니다. 그래도 여전히 <에서 640px로 표시됩니다. 빨간색 테두리는 결코 표시되지 않습니다.

마크 업이 :

<div id="colorPalette_container" class="center clearfix"> 

    <h1>Color Palette</h1> 
     <ul class="colorPalette"> 
      <li class="bg">#f2ede6 [Background]</li> 
      <li class="primary">#0b4167 [Primary]</li> 
      <li class="secondary">#00538e [Links]</li> 
      <li class="logo">#00a7e0 [Logo]</li> 
      <li class="text">#f2ede6 [Text]</li> 
      <li class="subtext">#56524d [Sub-text]</li> 
      <li class="icons">#0b4167 [Icons]</li> 
      <li class="rule">#ffffff [Rules]</li> 
     </ul> 

</div> 

원래 CSS :

#colorPalette_container { 
    margin: 3.125em 0 5em 0; 
} 

    .colorPalette li { 
     list-style-type: none; 
     text-align: center; 
     width: 30%; 
     float: left; 
     margin: 0 0.625em 3.125em 0; 
     padding: 0.313em; 
     color: white; 
     font: 1.25em/1.6em "Proxima Nova", Helvetica, Arial, sans-serif; 
    } 

미디어 쿼리 :

@media screen and (max-width: 800px) { 
    .colorPalette li { 
      width: 45%; 
      float: left; 
      margin: 0 0.312em 3.125em 0.312em; 
      border: 1px solid blue; 
     } 
}; 

@media screen and (max-width: 640px) { 
    .colorPalette li { 
      width: auto; 
      float: none; 
      margin: 0 0 3.125em 0; 
      border: 1px solid red; 
     } 
}; 

Answer 1

에 그것은 당신이 각 @media 규칙 후 후행 세미콜론을해서입니다.

@media screen and (max-width: 800px) { 
    .colorPalette li { 
     width: 45%; 
     float: left; 
     margin: 0 0.312em 3.125em 0.312em; 
     border: 1px solid blue; 
    } 
} 

@media screen and (max-width: 640px) { 
    .colorPalette li { 
     width: auto; 
     float: none; 
     margin: 0 0 3.125em 0; 
     border: 1px solid red; 
    } 
} 

http://jsfiddle.net/tde7r/

Answer 2

은 아마 당신은 변경 될 수 있습니다

@media screen and (max-width: 800px) 

,

(테스트하지)

@media screen and (max-width: 800px) and (min-width: 641px)