Question

如何为宽度为991像素的平板电脑申请@media？我已经有了适用于手机的CSS文件，但在切换到平板电脑时，整个CSS都不同。如何使用相同的CSS申请平板电脑，因为它适用于下拉菜单中的手机？

我为CSS尝试了这个：

@media (max-width: 991px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-nav>li {
    float: none;
    background: black;
}
.navbar-text {
    float: none;
    margin: 15px 0;
}
.navbar-collapse.collapse.in { 
    display: block !important;    }}

这是Plunker。在这里，我希望淹没菜单的宽度可达991px，但它的工作宽度可达768px。如何改变呢？

Answer 1

更改你的div的课程

collapse navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-7 pull-right

与折叠navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-12

课程改变

.navbar-collapse.collapse.in {
display: block !important;
margin-left: 0;
}

Answer 2

使用平板电脑的以下媒体查询来应用相同的CSS

/* Landscape tablets and medium desktops */

@media (min-width: 992px) and (max-width: 1199px) {
 .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav>li {
        float: none;
        background: black;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block !important;
    }
}

平板电脑的下拉菜单

2 个答案: