为什么我的媒体查询不适用于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？

回答

相关问题