媒体查询逻辑运算符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

在以下媒体查询中添加nav .collapse的样式。这是更新的fiddle

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