用CSS定位这些元素的最佳方式是什么，以获得最好的响应布局？

Question

我正在创建一个网站，有一个部分我想把这个设计放在适当的地方：

​

​

目前，演讲气泡是设置为各自div的背景图像的svg图像，演讲气泡中的元素嵌套在演讲气泡的父div中。当改变浏览器宽度时，问题就出现了--文本不会停留在气泡中。

将此设计转换为仅使用html和CSS的响应式代码的最佳方法是什么？

这是目前为止的html代码：

<!-- Reviews -->
  <section id="reviews">
    <h2>Reviews</h2>
    <section class="visitor-review-1">
      <div class="review-1">
        <img id="user-image-1" src="media/profile-picture-1.png">
        <div id=visitor-comment-1>
          <p>Make sure you visit Santorini when you go to Greece. Its magical! An island that is a volcano, what could be dreamier? Make sure you try the local naturally sweet red wine, sweet tomatoes and lava.
          </p>
          <p>
            <strong><br>Amy Santiago</strong><br>Birmingham, UK
          </p>
        </div>
      </div>
    </section>
    <section class="visitor-review-2">
      <div class="review-2">
        <img id="user-image-2" src="media/profile-picture-2.png">
        <div id=visitor-comment-2>
          <p>We went to a restaurant with a beautiful terrace called Elinikon and had the most amazing view. Not only the sunset but before and after the sky remains beautiful colours! 100% must see when in Santorini.
          </p>
          <p>
            <strong><br>Dave William</strong><br>London, UK
          </p>
        </div>
      </div>
    </section>
  </section>

和CSS：

#reviews {
  padding: 5rem 8rem 5rem 8rem;
  height: 100px;
}

.visitor-review-1 {
  background-image: url(media/speech-bubble-left_1.svg);
  background-repeat: no-repeat;
  background-size: 30rem;
  height: 350px;
  margin-top: 2.9rem;
}

.visitor-review-2 {
  background-image: url(media/speech-bubble-right.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 30rem;
  height: 350px;
  position: relative;
  top: -9rem;
}

.review-1 {
    width: 40%;
    position: absolute;
}

.review-2 {
    width: 50%;
    margin-left: 52%;
    position: absolute;
}

#user-image-1 {
    width: 110px;
    position: relative;
    left: 180px;
    top: 26px;
}

#visitor-comment-1 {
    font-family: 'Lato', sans-serif;
    padding: 2rem 4rem 0rem 3rem;
    color: rgba(16, 37, 89, 0.78);
    text-align: center;
    position: relative;
}

#user-image-2 {
    width: 110px;
    position: relative;
    left: 180px;
    top: 26px;
}

#visitor-comment-2 {
    font-family: 'Lato', sans-serif;
    padding: 2rem 4rem 0rem 3rem;
    color: rgba(16, 37, 89, 0.78);
    text-align: center;
    position: relative;
}

Answer 1

您可以使用@media标签来告诉您的代码，如果屏幕的最大宽度达到某个大小，该如何处理，例如：

@media only screen and (max-width: 425px) {
   .review-1 {
      width: 550%;
      position: absolute;
}
/*And keep filling in what you want changed at screensizes here*/
}