在较小的屏幕尺寸上删除“彼此相邻”的位置

时间：2018-09-16 16:35:46

标签： html css

我想为我的页面创建一个响应式导航栏。我将浮动div用于徽标和导航链接栏。

如果要测试小提琴，建议在全屏模式下打开它。 

#navbar {
  top: 0;
  position: sticky;
  height: 80px;
  padding: 0 160px;
  background: #232323;
}

.navbarItemContainer {
  height: 100%;
}

#navbarLogoContainer {
  display: flex;
  float: left;
  align-items: center;
}

#navbarLinkContainer {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  float: right;
  text-align: center;
  align-items: center;
}

.navbarLink {
  color: #039be5;
  transition: 0.2s;
}

.navbarLink:hover {
  color: #25bdf7;
  transition: 0.2s;
}

.navbarLink>img {
  width: 32px;
  height: 32px;
  display: none;
}

@media only screen and (max-width: 1000px) {
  #navbar {
    padding: 0 60px;
  }
  .navbarLink>span {
    display: none;
  }
  .navbarLink>img {
    display: block;
  }
  .navbarLink>img {
    width: 24px;
    height: 24px;
  }
  #navbarLinkContainer {
    grid-template-columns: 24px 24px 24px;
    grid-gap: 0 40px;
  }
}

@media only screen and (max-width: 400px) {
  /* place logo above button bar */
  #navbar {
    background: red;
    /* just a test */
  }
}
<div id="navbar">

  <div id="navbarLogoContainer" class="navbarItemContainer">
    <a>
      <img class="img" src="/resources/logo.png">
    </a>
  </div>

  <div id="navbarLinkContainer" class="navbarItemContainer">

    <a class="navbarLink">
      <span>
           Link 1
      </span>
      <img class="img" src="">
    </a>

    <a class="navbarLink">
      <span>
          Link 2
      </span>
      <img class="img" src="">
    </a>

    <a class="navbarLink">
      <span>
          Link 3
      </span>
      <img class="img" src="">
    </a>

  </div>

</div>

在移动屏幕尺寸方面，带有6个图标的导航栏太大。我想将导航栏调整为400像素的屏幕尺寸。

@media only screen and (max-width: 400px) {
  #navbar {
    background: red; // placeholder
  }
}

我要删除浮动div，并将徽标放在按钮栏上方。当屏幕尺寸小于400像素时，徽标必须向上移动一行。结果将是

smallerThan400

我该如何实现？

编辑：

我尝试过

@media only screen and (max-width: 400px) {
  #navbarLogoContainer {
    clear: left;
  }

  #navbarLinkContainer {
    grid-template-columns: 33.33% 33.33% 33.33%;
    clear: right;
  }
}

但没有帮助。

3 个答案:

答案 0 :(得分：1)

尝试一下：

@media only screen and (max-width: 400px) {

  /* place logo above button bar */

  #navbar {
    background: red;
    /* just a test */
  }

  #navbarLogoContainer {
      display:block;
      float:none;
      text-align:center;
  }

  #navbarLinkContainer {
    display: block;
    width: 100%;
    text-align: center;
  }

  .navbarItemContainer {
      height: 30px;
      padding: 5px 0;
  }

  .navbarLink {
      display:inline-block;
  }

}

我也做了一个摘要：

#navbar {
  top: 0;
  position: sticky;
  height: 80px;
  padding: 0 160px;
  background: #232323;
}

.navbarItemContainer {
  height: 100%;
}

#navbarLogoContainer {
  display: flex;
  float: left;
  align-items: center;
}

#navbarLinkContainer {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  float: right;
  text-align: center;
  align-items: center;
}

.navbarLink {
  color: #039be5;
  transition: 0.2s;
}

.navbarLink:hover {
  color: #25bdf7;
  transition: 0.2s;
}

.navbarLink>img {
  width: 32px;
  height: 32px;
  display: none;
}

@media only screen and (max-width: 1000px) {
  #navbar {
    padding: 0 60px;
  }
  .navbarLink>span {
    display: none;
  }
  .navbarLink>img {
    display: block;
  }
  .navbarLink>img {
    width: 24px;
    height: 24px;
  }
  #navbarLinkContainer {
    grid-template-columns: 24px 24px 24px;
    grid-gap: 0 40px;
  }
}

@media only screen and (max-width: 400px) {

  /* place logo above button bar */

  #navbar {
    background: red;
    /* just a test */
  }

  #navbarLogoContainer {
      display:block;
      float:none;
      text-align:center;
  }

  #navbarLinkContainer {
    display: block;
    width: 100%;
    text-align: center;
  }

  .navbarItemContainer {
      height: 30px;
      padding: 5px 0;
  }

  .navbarLink {
      display:inline-block;
  }

}
<div id="navbar">

  <div id="navbarLogoContainer" class="navbarItemContainer">
    <a>
      <img class="img" src="/resources/logo.png">
    </a>
  </div>

  <div id="navbarLinkContainer" class="navbarItemContainer">

    <a class="navbarLink">
      <span>
           Link 1
      </span>
      <img class="img" src="">
    </a>

    <a class="navbarLink">
      <span>
          Link 2
      </span>
      <img class="img" src="">
    </a>

    <a class="navbarLink">
      <span>
          Link 3
      </span>
      <img class="img" src="">
    </a>

  </div>

</div>

让我知道这是否有帮助。

答案 1 :(得分：1)

这是一个简单的工作示例，可以帮助您编写代码

.container {
    height: 100vh;
}
.navbar {
    display: flex;
}
.navbar .logo-container {
    flex: 1;
    display: flex;
}
.navbar .logo-container span {
    flex: 1;
}
.navbar .links-container {
    flex: 1;
    display: flex;
}
.navbar .links-container div {
    flex: 1;
}
@media only screen and (max-width: 400px) {
    .navbar {
        display: grid;
        grid-template-rows: 150px auto;
        grid-template-columns: repeat(6, 1fr);
    }
    .navbar .logo-container {
        grid-column: 1/7;
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .navbar .links-container {
        grid-column: 1/7;
        display: flex;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div class="container">
    <div class="navbar">
        <div class="logo-container">
            <span>image</span>
        </div>
        <div class="links-container">
            <div>link1</div>
            <div>link2</div>
            <div>link3</div>
            <div>link4</div>
            <div>link5</div>
            <div>link6</div>
        </div>
    </div>
</div>
</body>
</html>

答案 2 :(得分：0)

对于400px，我想我会去

您如何看待该解决方案？

@media only screen and (max-width: 400px){
    #navbar {
        height: 100px;
        padding: 0 5px;
    }

    #navbarLogoContainer {
        height: 50%;
        display: block;
        float: none;
        text-align: center;
    }

    #navbarLinkContainer {
        height: 50%;
        display: grid;
        float: none;
        grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
        justify-items: center;
        grid-gap: 0 5px;
    }
}


#navbar {
  top: 0;
  position: sticky;
  height: 80px;
  padding: 0 160px;
  background: #232323;
}

.navbarItemContainer {
  height: 100%;
}

#navbarLogoContainer {
  display: flex;
  float: left;
  align-items: center;
}

#navbarLinkContainer {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  float: right;
  text-align: center;
  align-items: center;
}

.navbarLink {
  color: #039be5;
  transition: 0.2s;
}

.navbarLink:hover {
  color: #25bdf7;
  transition: 0.2s;
}

.navbarLink>img {
  width: 32px;
  height: 32px;
  display: none;
}

@media only screen and (max-width: 1000px) {
  #navbar {
    padding: 0 60px;
  }
  .navbarLink>span {
    display: none;
  }
  .navbarLink>img {
    display: block;
  }
  .navbarLink>img {
    width: 24px;
    height: 24px;
  }
  #navbarLinkContainer {
    grid-template-columns: 24px 24px 24px;
    grid-gap: 0 40px;
  }
}

@media only screen and (max-width: 400px) {
  /* place logo above button bar */
  #navbar {
    background: red;
    /* just a test */
  }
}
<div id="navbar">

  <div id="navbarLogoContainer" class="navbarItemContainer">
    <a>
      <img class="img" src="/resources/logo.png">
    </a>
  </div>

  <div id="navbarLinkContainer" class="navbarItemContainer">

    <a class="navbarLink">
      <span>
           Link 1
      </span>
      <img class="img" src="">
    </a>

    <a class="navbarLink">
      <span>
          Link 2
      </span>
      <img class="img" src="">
    </a>

    <a class="navbarLink">
      <span>
          Link 3
      </span>
      <img class="img" src="">
    </a>

  </div>

</div>

相关问题
最新问题