多個媒體查詢被忽略

Question

我想要做的是從3列切換到< 800，然後1列< 640.我發現第一個查詢被確認，但以下查詢被忽略。如果我交換查詢的地方，則適用相同的規則。對於我在下面使用的，我看到最大寬度：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) 

（未測試）