Question

我正在使用bootstrap，并为导航栏设置了最小高度150px。这有效但我想在屏幕宽度低于768px时将最小高度重新调整为30px。

我使用类.navbar-min-height设置最小宽度，因此尝试使用新的最小高度像素在@media下再次调用该类，但导航栏保持150px的相同高度。无论如何我可以绕过这个？

CSS文件

/* works */
.navbar-min-height{
    min-height: 150px;
}

@media only screen and (max-width: 768px) {
    /* Not working */
    .navbar-min-height{
        min-height: 30px;
    }
}

Html Page

<nav class="nav navbar navbar-fixed-top navbar-min-height navbar-custom">
    ......
</nav>

Answer 1

你需要把@navbar-min-height放在@media里面（min-width：769）

这是一个有效的例子：

＆＃13;

@media (min-width: 789px) {
   nav p {
     font-size: 1.5em;
     }
  }

@media (max-width: 788px) {
    nav p {
      font-size: 3em;
     }
  }

＆＃13;

<nav>
  <p>Lorem Ipsum Sit Amet</p>
</nav>

＆＃13;

现在只需运行上面的代码段，并在屏幕宽度低于789时调整屏幕大小和字体大小。

现在，如果要删除@media min-width，则文本不会增加大小。

Answer 2

正如它所说，

min-height是最小值，而不是最大值。如果navbar的高度为150，那么你可能在其中有一个强迫它具有更高高度的元素。检查子元素。

另外，使用检查器检查给定的媒体查询是否生效。

Answer 3

使用“所有媒体”是否有效？

我不认为这个css是错的，菜单应该是30px从0到768px然后是150px

如果这不起作用，请尝试明确设置尺寸

@media only screen and (max-width: 768px) {
    .navbar-min-height{
        min-height: 30px;
    }
} 

@media only screen and (min-width: 768px) {
    .navbar-min-height{
        min-height: 150px;
    }
}

根据屏幕宽度调整导航栏最小高度

3 个答案: