Question

我正在使用Skeleton作为我的CSS框架

目前我的导航栏在PC桌面视图中位于顶部（即页面在其下滚动）。这是代码：

<div style="height:50px">
 <div id="fixed-nav-bar">
  <div class="container" id="nav">

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </div>
 </div>
</div>



#fixed-nav-bar {
      position:fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      height: 50px;
      background-color:linen;
  }

#nav ul {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    list-style-type: none;
    text-align: center;
  }

#nav ul li {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
  }

我的问题：我怎样才能这样做，以便在移动设备（即手机）中查看时，导航栏移动到底部（在单手模式下可以轻松使用）并保持粘性？

我猜我需要使用媒体查询。我怎么在这里使用它们？

Answer 1

以下是我的解决方案：使用bottom:0;，您可以将#fixed-nav-bar放在页面底部。只需将您选择的设备宽度替换为960px #fixed-nav-bar即可到达底部。

@media screen and (max-width: 960px) {
    #fixed-nav-bar {
        top: inherit;
        bottom: 0;
    }
}

桌面导航栏粘贴顶部到移动导航栏粘底

1 个答案: