Question

出于设计目的，我希望将一个句子拆分为另一行，我遇到的问题是无缝地使其适合包含div，因为分辨率会变小。我目前设置它的方法是将句子的宽度设置为小于包含div，以便在“all”之后的任何文本向下移动到下一行。我遇到的问题显然是％宽度在低于最高分辨率的任何媒体查询上看起来不太好。

唯一的方法是创建多个媒体查询吗？

当前代码：

div.slide {
  padding: 110px 30px 110px 30px;
  height: 500px;
  text-align: center;
}
div.slide-content {
  padding: 0px;
  margin: 0 auto;
  max-width: 1100px;
}
div.slide-text {
  font-weight: 400;
  font-size: 17px;
  width: 75%;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

<div class="slide">
  <div class="slide-content">
    <div class="slide-text">Lorem ipsum dolor sit amet, cLorem ipsum dolor sit amet onsectetuer adipiscing elit-all Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
  </div>
</div>

Answer 1

我肯定会建议使用媒体查询。如果您想完全接管句子中断的位置，可以在确切的位置添加换行符，但我不建议这样做，因为它可能会影响其他分辨率。

所以.slide-text width与媒体查询相结合应该没问题：）

e.g。

@media (max-width: 600px) {
  div.slide-text {
    width: 90%;
  }
}
@media (max-width: 900px) {
  div.slide-text {
    width: 85%;
  }
}
@media (min-width: 901px) {
  div.slide-text {
    width: 75%;
  }
}

请确保根据自己的需要进行更新：）

什么是使用响应式设计在两条线上生活一次的最好方法

1 个答案: