Question

我正在创建一个网站，有一个部分我希望这个设计到位：

此刻，语音气泡是svg图像设置为背景图像到他们自己的个体div，语音气泡内的元素嵌套在语音气泡父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*/
}

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

1 个答案: