导航栏高度不能正确移动响应

Question

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

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

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

我尝试了什么/我认为问题是什么

我很确定这与此有关：

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

我从this Github 页面获得，但我不知道如何根据屏幕大小自动更改 75px 数字。我读了这个question/answer，但仍然不知道如何在我的情况下更改 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; 
  }
}

发生的情况是，一旦您的屏幕宽度低于 480 像素（此值可以调整为您需要的任何值），它将运行 height: 65px; 并覆盖其上方的 height 样式。

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

这应该可以回答您的问题。但是，您真正应该做的是，一旦您的屏幕缩小到足够小，您应该考虑将所有导航按钮编译到一个下拉菜单中。

如果您愿意，请查看此页面： https://www.w3schools.com/howto/howto_js_topnav_responsive.asp