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

如何解决导航栏高度不能正确响应移动设备

我正在尝试做什么（包括 JSBin）

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

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

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

我很确定这与此有关：

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

这是我从 this Github 页面获得的，但我不知道如何根据屏幕尺寸自动更改 75px 数字。我读了这个 question/answer，但仍然无法弄清楚如何在我的情况下更改 CSS。

解决方法

看起来那个页面是用于 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