javascript - 使我的 2 div 在屏幕上堆叠小于 600px

Question

当屏幕宽度低于 600 像素时，我无法将 2 个 div 堆叠在一起。我试过向它添加 flexbox，但它似乎并不适合我。HTML

<main>
  <section class="home-hero">
    <div class="hero-text">
      <h1>Psykolog<br> Mathias Spangsberg Andersen</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="hero-img">
        <img src="img/portræt.jpg" alt="Portræt Mathias Andersen">
        <a class="order-button" href="bestil-tid.html">Bestil tid</a>
    </div>
  </section>
  </main>

桌面 CSS

.home-hero {
  position: relative;
  margin-top: 0px;
  background-image: url(../img/forside.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  background-blend-mode: luminosity;
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero-text {
  display: flex;
  justify-content: center;
  width: 40%;
  height: 400px;
  background-color: grey;
  margin: 80px 40px;
}

.hero-img {
  display: flex;
  justify-content: center;
  width: 40%;
  height: 400px;
  background-color: grey;
  margin: 80px 40px;
}
.hero-text h1::first-line {
  font-size: 30px;
  font-style: bold;
}
.hero-text h1 {
  font-size: 25px;
  text-align: center;
  padding-top: 25px;
}
.hero-text p {
  padding: 10px 25px 0;
  text-align: left;
}
.hero-img img {
  display: block;
  width: auto;
  height: 70%;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
}
.order-button {

  width: 200px;
  height: 50px;
  background-color: #27B9E5;
  color: black;
  text-decoration: none;
  line-height: 2;
  text-align: center;
  font-size: 25px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  transition: 1s;
  margin-bottom: 20px;
}
.order-button:hover {
  background-color: #22A4CC;
  color: white;
  border-radius: 15px;
  transition: 0.3s;
}

平板电脑的 CSS

@media screen and (min-width:720px) and (max-width:1200px) {
  .hero-img img {
      display: block;
      width: 90%;
      object-fit: contain;
      margin-left: auto;
      margin-right: auto;
  }
}
@media screen and (max-width: 720px) {
  .hero-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    background-color: grey;

    margin: 40px 40px;
  }
  .hero-text h1::first-line {
    font-size: 30px;
    font-weight: 900;
  }
  .hero-text h1 {
    font-size: 25px;
    text-align: center;
  }
  .hero-text p {

    margin-bottom: 100px;
    text-align: left;
  }
  .hero-img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    background-color: grey;
    margin: 40px 40px;
  }
  .order-button {
    display: block;
    width: 70%;
    height: 10%;
    background-color: #27B9E5;
    color: black;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    margin-top: -10px;
  }
}

移动端 CSS

@media screen and (min-width:0px) and (max-width:720px) {
  .hero-img img {
      display: block;
      width: 90%;
      object-fit: contain;
      margin-left: auto;
      margin-right: auto;
  }
}
@media screen and (max-width: 720px) {
  .hero-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .hero-img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
}

非常感谢任何建议，因为我真的希望它能工作。其他更正、建议和建议非常受欢迎。祝你有个愉快的一天

Answer 1

使用最小宽度和 flex-wrap...

HTML

<flex-box>
  <div></div>
  <div></div>
</flex-box>

CSS

flex-box {
  display: flex;
  width: 100%;

  // magic
  flex-wrap: wrap;

  div {
    //styling
    background: #ccc;
    height: 200px;
    margin: 1em;
    flex: 1;

    // magic
    min-width: 600px;
  }
}

我从头开始写这篇文章，以便您和其他人可以轻松了解它是如何完成的。将 max-width、min-width 与 flex-wrap 结合使用可以让您避免媒体查询更改为移动堆栈的需要。