Question

我正在尝试使我的导航响应，我不知道如何，它想要它所以它不会跳到下一行，我知道填充是导致这个，我可以通过使用百分比帮助这个作为宽度，但看起来很丑。

这是页面在正常分辨率上的显示方式： http://imgur.com/a/YO7xh

这是我放大时的样子..（这是我不想发生的事情）： http://imgur.com/a/a3Siu

我该怎么做才能防止这种情况发生？

导航代码：

.header-side .game {
  float: right;
}

.header-side .selected {
  color: #f7c22c;
}

.header-side .other {
  float: left;
}

.bottom-header {
  height: 115px;
  border-bottom: 1px solid #343538;
  display: flex;
  color: #787878;
  text-transform: uppercase;
  font-size: 14px;
}

header {
  width: 100%;
}

.top-header {
  height: 45px;
  border-bottom: 1px solid #343538;
  width: 100%;
}

.header-side {
  width: 45%;
  height: 100%;
}

.header-middle {
  width: 10%;
  margin: auto;
  display: flex;
  align-items: center;
}

.header-divider {
  height: 60px;
  text-align: center;
  transform: rotate(45deg);
  width: 60px;
  margin: auto;
  border: 1px solid #f7c22c;
}

<header>
  <div class="top-header">
    This is the top header!
  </div>
  <div class="bottom-header">
    <div class="header-side">
      <div class="nav-item game">skin upgrade</div>
      <div class="nav-item game">skin royale</div>
      <div class="nav-item game selected">skin crash</div>
    </div>
    <div class="header-middle">
      <div class="header-divider">
      </div>
    </div>
    <div class="header-side">
      <div class="nav-item other">deposit</div>
      <div class="nav-item other">withdraw</div>
      <div class="nav-item other">provably fair</div>
    </div>
  </div>
</header>

Answer 1

尝试在css中使用媒体查询：

@media screen and (max-width: 768px) {
  element {padding: 0;}
}

因此，当分辨率达到768px时，它将删除元素的填充。

Answer 2

好吧，你可以使用https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 或者你可以用百分比。毕竟桌面网页在420p屏幕上看起来不会更好。我建议使用更多的东西＆＃34;低分辨率＆＃34;，例如移动设计，所以使用媒体查询可能是你能做的最好的。

编辑：https://www.w3schools.com/css/css_rwd_mediaqueries.asp 这就是你想要的。

响应式导航

2 个答案: