爲什麼我的媒體查詢不適用於Flexbox？

我首先構建移動設備並使用flexbox。我有三列..爲什麼我的媒體查詢不適用於Flexbox？

<div id="container"> 
    <div id="one"></div> 
    <div id="two" class="hidden"></div> 
    <div id="three" class="hidden"></div> 
</div>

在手機上我想隱藏隱藏的類。

雖然我設計的移動首先第一個CSS讀是：

#container { 
      width: 87%; 
      margin: 0 auto; 
      display: flex; 
      flex-direction: column; 
     }

然後我用媒體查詢隱藏.hidden。

@media screen and (max-width: 360px) { 
      .hidden { 
       display: none; 
      } 
     }

然後我進入桌面樣式和風格三個div的，像這樣

@media screen and (min-width: 600px) { 
#container { 
       width: 93%; 
       margin: 0 auto; 
       display: flex; 
       flex-direction: row; 
      } 

}

爲什麼是它最後的兩個div與類的hidden沒有隱藏在移動？

Fiddle

來源

2016-07-22 Michael

你的移動設備的寬度是否超過360px？ – pdoherty926

你說得對。我不想補充這個答案嗎？ – Michael

僅供參考，如果您想測試不同寬度的響應式設計，您可以隨時調整計算機上的瀏覽器窗口大小。 –

您的移動設備很可能比360像素寬。找出正確的寬度，並相應地調整你的樣式表。

另外，如果可能，您應該考慮使用更通用的媒體查詢（例如(orientation: portrait)），以避免在樣式表中硬編碼寬度。

來源

2016-07-22 14:20:25 pdoherty926

爲什麼我的媒體查詢不適用於Flexbox？

回答

相關問題