媒体查询逻辑运算符 AND（最大宽度和最大高度）

Question

我在 @media (min-height: 490px) 上使用垂直导航栏；如果高度较小，它会变成水平导航栏。

它应该仅在 (max-width:300px) AND (max-height:490px) 时崩溃。如果width < 300px但height > 490px，应该不会崩溃。

我正在使用 Bootstrap 3.3.5 (Sass)。

这里有一个 fiddle 假的宽度和高度，只是为了说明错误。每次 width < 300px 都会崩溃，即使 height is > 490px;

是否可以仅使用媒体查询来完成我所需要的？或者我应该开始尝试 JQuery?

Answer 1

在下面的媒体查询中为您的导航 .collapse 添加样式。这是更新后的 fiddle

@media (min-height: 490px) {
#side-navbar {
    width: 50px;
    height: 100%;
}
.navbar-collapse.collapse {
   display: block!important;
}
.navbar-toggle {
   display: none !important;
}
}

媒体查询逻辑运算符 AND（最大宽度和最大高度）

Media query logical operator AND (max-width and max-height)

css

media-queries

twitter-bootstrap