メディアクエリがFlexboxで動作しないのはなぜですか？

Question

私はまずモバイルを構築し、フレックスボックスを使用しています。私は3つの列を持っています。

<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; 
      } 
     } 

それから私は、なぜそれがhiddenのクラスで最後の二つのdiv要素は、モバイルに隠れていないということですので、

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

} 

のような3つのdivデスクトップスタイルとスタイルに入りますか？

Fiddle

Answer 1

お使いのモバイルデバイスは、おそらく360pxよりも広くなっています。正しい幅が何であるか把握し、それに応じてスタイルシートを調整してください。

また可能であれば、より一般的なメディアクエリ（例：(orientation: portrait)）を使用して、スタイルシートに幅をハードコードする必要性を避けることを検討する必要があります。