为什么我的媒体查询不适用于 Flexbox？

Question

我首先构建移动设备并使用 flexbox。我有三列..

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

在移动设备上，我希望隐藏 class。

虽然我首先设计移动设备，但第一个 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;
            }

}

为什么hidden最后两个class的div在手机上没有隐藏？

Fiddle

Answer 1

您的移动设备可能比 360 像素宽。弄清楚正确的宽度是多少，并相应地调整样式表。

此外，如果可能，您应该考虑使用更通用的媒体查询（例如 (orientation: portrait)）以避免在样式表中对宽度进行硬编码。

为什么我的媒体查询不适用于 Flexbox？

Why is my media query not working with Flexbox?

css

media-queries

flexbox