html - Flexbox 不适用于页面响应

Question

我正在使用 Flex-box 使网站具有响应性，但它​​无法正常工作。然而，目前在笔记本电脑视口(viewport)中查看页面时一切看起来都很正常；当我尝试调整浏览器大小时，三个 div 的背景图像是唯一留在原地的元素，导航栏和其他所有内容似乎都移到了页面的右侧。我已经尝试了一切，甚至使用媒体查询，但无济于事。什么都不管用。我在这里做错了什么？仅供引用，我将复制并粘贴我的整个 HTML 文档，以便有人可以帮助我查明问题。

body {
  margin: 0;
  padding: 0;
}

.body {
  display: flex;
  flex-direction: column;
  height: 600px;
}

.body-white {
  display: flex;
  height: 105px;
  margin-left: 355px;
}

nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-left: 330px;
}

ul {
  padding-left: 820px;
  flex-basis: 97%;
  margin-top: 0.5%;
  height: 20px;
}

#mounts {
  flex-basis: 3%;
  height: 20px;
  margin-top: 0.5%;
}

#second-ul {
  padding-left: 800px;
}

.fa {
  padding-left: 100px;
  display: none;
}

.top,
.middle,
.bottom {
  flex: 1 0 100%;
}

.top {
  background-image: url('img/mountains.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.middle {
  background-image: url('img/second-mountain.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.bottom {
  background-image: url('img/last-mountain.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 25px solid #3f5069;
  border-bottom: 40px solid #3f5069;
}

li {
  display: inline-block;
  margin-top: -10%;
  text-decoration: underline;
  font-family: 'Ropa Sans', sans-serif;
  font-size: 13px;
}

a {
  color: black;
  text-decoration: none;
}

#inner-box {
  background-color: #ebedf0;
  opacity: 0.8;
  width: 20%;
  height: 35%;
  display: flex;
  margin: 100px 300px;
  flex-direction: column;
}

#title {
  font-size: 25px;
  font-family: 'Anton', sans-serif;
  color: #3f5069;
  font-weight: 100;
  letter-spacing: 1px;
  margin: 8px 20px;
}

.left-text {
  text-align: left;
  margin-top: -12px;
  font-family: 'Kulim Park', sans-serif;
  font-size: 12px;
  margin-left: 20px;
  font-weight: 100;
}

.right-text {
  margin-top: -135px;
  text-align: right;
  font-family: 'Kulim Park', sans-serif;
  font-size: 12px;
  margin-right: 20px;
  font-weight: 100;
}

.right {
  line-height: 2
}

.left {
  line-height: 2
}

@media(max-width: 1024px) {
  ul {
    padding-left: 400px;
  }
  #second-ul {
    padding-left: 370px;
  }
  .parent-white {
    margin-left: 220px;
  }
  #inner-box {
    width: 20%;
    margin: 50px 200px;
  }
  #title {
    font-size: 20px;
  }
  .left-text,
  .right-text {
    font-size: 10px;
  }
  .right-text {
    margin-top: -112px
  }
}

<div class='body'>
  <div class='top'>
    <nav>
      <img id='mounts' src='img/mountains-logo.png'>
      <ul>
        <li><a href='#'>01.HISTORY</a></li>
        <li><a href='#'>02.TEAM</a></li>
      </ul>
      <i class='fa fa-bars'></i>
    </nav>
  </div>
</div>
<nav>
  <img id='mounts' src='img/mountain-logo.jpg'>
  <ul id='second-ul'>
    <li><a href='#'>01.HISTORY</a></li>
    <li><a href='#'>02.TEAM</a></li>
  </ul>
</nav>
<div class='body'>
  <div class='middle'></div>
</div>
<div class='body-white'>
  <img class='white' src='img/white.jpg'>
</div>
<div class='body'>
  <div class='bottom'>
    <div id='inner-box'>
      <p id='title'>SCHEDULE</p>
      <div class='left-text'>
        <p>25 Nov 2016</p>
        <p>28 Nov 2016</p>
        <p class='left'>18 Dec 2016</p>
        <p class='left'>7 Jan 2017</p>
      </div>
      <div class='right-text'>
        <p>Vestibulum viverra</p>
        <p>Vestibulum viverra</p>
        <p class='right'>Vestibulum viverra</p>
        <p class='right'>Vestibulum viverra</p>
      </div>
    </div>
  </div>
</div>

Answer 1

所以您可能不太喜欢我的回答，但对我来说，您似乎建立了一个网站，然后在您喜欢它的外观后尝试使其响应。这并不是响应式网页设计的工作原理。您必须从一个一个地构建网站的每个部分开始，并确保每个部分在您进行时都能响应。从布局开始，确保您的布局是响应式的。然后添加标题，并使其响应。然后添加一个 Nav-Bar 并让它与其他一切一起负责任地工作。然后，如果您遇到问题，请返回此处发布，一旦您缩小到您想要解决的问题，开发人员将能够更好地帮助您。您现在拥有的是一种看起来有点现代的静态网页，只能在 PC 上呈现。为了帮助您，我将不得不删除并重新添加每个具有不同 CSS 的 HTML 元素，这只会为您构建网站。