媒体查询逻辑运算符AND (max-width和max-height)

Question

我在@media (min-height: 490px)上使用垂直导航条;如果高度较小，则变为水平导航条。

只有当(max-width:300px) AND (max-height:490px)。如果是width < 300px而不是height > 490px，则不会坍塌。

我使用Bootstrap 3.3.5 (Sass)。

这里是一个假的宽度和高度提琴，只是为了显示什么是错误的。每次width < 300px，即使height is > 490px;

是否有可能完成我需要只使用媒体查询?或者我应该开始尝试使用JQuery?

Answer 1

在下面的媒体查询中添加nav .collapse的样式。这是更新后的小提琴

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