如何在响应循环中制作文本responsive as well

Posted 2021-05-02

我已经处理了这个问题已经有好几天了，这让我很疯狂，我希望当我使屏幕变小时，圆圈内的文本在圆圈div内的相同位置移动，如图所示。

如果您有任何提示，请分享！

CSS代码和html代码：

.circleBase {
  border-radius: 50%;
}

.contact-circle {
  margin-top: 29%;
  margin-left: 4%;
  position: fixed;
  width: 23%;
  height: auto;
  padding-top: 23%;
  background-color: rgba(255, 86, 86, 0.2);
}

#contact-text {
  top: 20%;
  bottom: 20%;
  left: 18%;
  font-size: auto;
  position: absolute;
  text-align: center;
  width: 60%;
  opacity: 1;
}

<div class="circleBase contact-circle">

  <div id="contact-text">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    </p>
  </div>

</div>

答案

使用另一种方法使文本居中。这是flex的一个想法：

.circleBase {
  border-radius: 50%;
}

.contact-circle {
  position: fixed;
  width: 23%;
  height: auto;
  padding-top: 23%;
  background-color: rgba(255, 86, 86, 0.2);
}

#contact-text {
  top: 0;
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center
}

<div class="circleBase contact-circle">
  <div id="contact-text">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    </p>
  </div>
</div>

另一答案

响应式网站 - @media（最小宽度：450px）和（最大宽度：900px）{css style}

<div class="circleBase contact-circle">

<div id="contact-text">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>

</div>

Css @media示例

.circleBase {
height:800px;
width:800px;
}

@media (max-width:479px) {

.circleBase {

height: 400px;
width:400px;

}
}

以上是关于如何在响应循环中制作文本responsive as well的主要内容，如果未能解决你的问题，请参考以下文章

Adobe flash (AS2)：如何制作一个永远重复的循环，并且每 5 秒复制一个影片剪辑？

如何在 HTTP 403 响应中获取自定义错误响应文本

如何在 Golang 中处理纯文本 HTTP Get 响应？

如何在 ngFor 循环 [Angular] 中制作可扩展的表格行？

如何在Golang中处理纯文本HTTP Get响应？

如何从 json 响应中制作动态部分标题