解决使用 nth child 进行导航的 Margin 问题

Question

我目前设置了导航，以便我的徽标位于导航中间。我从css3 nth child selector 获得了代码标记，它按预期工作

我使用的是 wordpress，所以我的标记当然有点不同

我的问题是我想要一个媒体查询来调整移动设备的大小，但是当我调整它的大小时，它会保留我为桌面导航设置的边距。有没有办法让这些边距消失或恢复默认值，以便在缩小到移动尺寸时看起来不会全部分散？ 当扩展到移动设备时，我希望边距有所不同。

感谢观看

  <header class="header">
            <nav class="nav">
        <ul>
               <li>Home</li>
               <li>About</li>
               <li>Services</li>
               <li>Work</li>

        </ul>
           </nav>

    <a class="logo" href="http://www.website.com"></a>

    </header><!--header-->


  header {
  border-top: 5px solid #3399ff;
  height: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;


}

 nav li {display: inline-block;}

 nav li:nth-child(1) {

 margin-right: 100px;

}

 nav li:nth-child(2) {

 margin-right: 50px;
  }

 nav li:nth-child(3) {

 margin-left: 50px;

  }

 nav li:nth-child(4) {
 margin-left: 100px;
  }

Answer 1

我认为，如果您为带有媒体查询的“桌面”版本和带有另一个媒体查询的“移动版本”设置边距，这是可能的。

我应该看起来像这样：

@media (min-width: 768px) { /*insert you desktop css here }

@media (max-width: 767px) { /*insert you mobile css here }

如果您的视口为 768 像素或更大，这将使用桌面 CSS；如果视口为 767 像素或更小，则使用移动 CSS。

希望能解决您的问题。