导航栏高度未正确响应移动设备

Question

我正在尝试做什么(包括JSBin(

我的导航栏在桌面上运行良好：当你点击一个项目时，它会扫描到页面的那个部分，从标题开始。然而，当我调整大小为移动时，间距是关闭的；第2节"；在导航栏上，您应该看到"；第2节"；在导航栏的正下方弹出。

请参阅JSBin上的示例。(使用开发人员工具在手机上显示，在导航栏周围单击时查看问题(。

我尝试了什么/我认为问题出在哪里

我确信这与有关

.anchor:before { 
display: block; 
content: " "; 
margin-top: -75px; 
height: 75px; 
visibility: hidden; 
}

这是我从这个Github页面上得到的，但我不知道如何根据屏幕大小自动更改75px的数字。我读了这个问题/答案，但仍然不知道如何在我的情况下更改CSS。

Answer 1

看起来该页面是用于Bootstrap的。您要查找的内容直接内置到CSS中！查看此页面。https://www.w3schools.com/css/css_rwd_mediaqueries.asp

从本质上讲，一旦你的页面缩小到移动设备，你就会发生这种情况。它会导致你的按钮(文本元素(堆叠，导致你的导航在垂直方向上比它应该的大！要回答您的代码问题，请尝试以下操作：

.anchor:before { 
display: block; 
content: " "; 
margin-top: -75px; 
height: 75px; 
visibility: hidden; 
}
@media only screen and (max-width: 480px) {
.anchor:before { 
height: 65px; 
}
}

一旦你的屏幕宽度达到480px(这个值可以根据你的需要进行调整(，它就会运行height: 65px;并覆盖上面的height样式。

当你不想调整导航栏的大小时，另一种方法是设置overflow: hidden;，然后具体定义你想要的高度。(就我个人而言，我喜欢使用height: 47px;。对我来说，这是一个完美的尺寸(

这应该能回答你的问题。然而，你真正应该做的是，一旦你的屏幕缩小到足够小，就把所有的导航按钮编译成下拉菜单。

如果你觉得可以，请查看此页面：https://www.w3schools.com/howto/howto_js_topnav_responsive.asp