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 }

如果视口为768px或更大，则将使用桌面css;如果视口为767px或更小，则将使用移动css。

希望能解决你的问题。

解决使用第n个孩子进行导航的保证金问题

1 个答案: