Question

我首先使用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;
            }

}

为什么hidden类的最后两个div没有隐藏在移动设备上？

Fiddle

Answer 1

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

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

为什么我的媒体查询无法使用Flexbox？

1 个答案: