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

【问题标题】：Adjust navbar minimum height depending on screen width根据屏幕宽度调整导航栏最小高度
【发布时间】：2016-01-23 04:22:14
【问题描述】：

我正在使用引导程序，并为导航栏设置了 150 像素的最小高度。这可行，但我想在屏幕宽度低于 768px 时将最小高度重新调整为 30px。

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

CSS 文件

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

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

HTML页面

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

【问题讨论】：

没有具体的例子很难说，但我可能猜想这是因为你使用的是最小高度而不是高度。浏览器只会将 min-height 解释为建议。
@veiko 已经尝试过高度和相同的结果。
bootstrop.css 中的某些内容可能与您自己的 CSS 冲突。不要忘记您可能有多个navbar-fixed-top（包括一个可能会以全尺寸折叠的）并且您不能低于navbar-fixed-top 的默认高度而不覆盖默认bootstrop.css 样式。此外，您可能需要确保所有 navbar-fixed-top 元素都没有固定大小。

标签： html twitter-bootstrap css

【解决方案1】：

您需要将 .navbar-min-height 放入 @media (min-width: 769)

这是一个工作示例：

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

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

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

现在只要运行上面的sn-p，当屏幕宽度低于789时，调整屏幕大小和字体大小。

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

【讨论】：

【解决方案2】：

使用“媒体全部”是否有效？

我觉得这个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】：

min-height 正如它所说，是最小值，而不是最大值。如果navbar 的高度为 150，那么您可能在其中包含元素，这会迫使它具有更大的高度。检查子元素。

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

【讨论】：