我正在尝试做的事情（包括jsbin）

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

请参见JSBin上的示例。（使用开发人员工具在移动设备上显示，以查看单击导航栏时出现的问题）。

我试过的/我认为问题是

我很确定这和这个有关：

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

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

顺晟科技：

看起来该页面是用于引导的。你要找的东西是直接内置在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.