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

我使用的是引导程序，并为导航栏设置了最小高度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页面

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

来源

2016-01-22 JasSy

很难说没有一个具体的例子，但我可能会猜测这是因为你使用最小高度而不是高度。浏览器只会将最小高度解释为一个建议。 – veiko

@veiko尝试过高度和相同的结果。 – JasSy

这可能是'bootstrop.css'中的一些与你自己的CSS冲突的东西。不要忘记，你可能会有更多的“navbar-fixed-top”（包括可能全尺寸折叠的），并且你不能低于“navbar-fixed-top”的默认高度覆盖默认的'bootstrop.css'风格。另外，您可能需要确保所有'navbar-fixed-top'元素都没有固定大小。 – morespace54

-1

它通过使用“媒体全部”工作吗？

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

如果这不起作用尝试设置大小明确

@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; 
    } 
}

来源

2016-01-22 20:22:14

您的代码有效。谢谢。 – JasSy

你需要把.navbar，最小高度内@media（最小宽度：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>

现在只需运行上面的代码中，当屏幕宽度低于789

现在调整屏幕和字体大小的变化，如果你删除@media最小宽度，则文本会不增加大小。

来源

2016-01-22 20:19:03 HTMLNoob

min-height就像它说的那样，是最小值，而不是最大值。如果navbar的高度为150，那么你可能在它内部有元素，这就迫使它具有更高的高度。检查子元素。

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

来源

2016-01-22 20:20:16 Trix

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

回答

相关问题