制作一个包含内容的响应圈

Question

我正在为我的摄影服务设计一个网站，我希望在移动设备上以圆形显示价格。

这是它在桌面上的样子：

Desktop view

不幸的是，它在移动设备上看起来像这样：

Mobile View

这是我用于每个圆圈的代码：

.pricessquarered {
  display:flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 16px #d17461;
  padding: 30px;
  width: 10vw;
  height: 10vw;
  color: #d17461;
  font-size: 22px;
  padding-top: 30px;
  border-radius: 100%;
}

<div class="pricessquarered">
  <div>
    <h3><span style="color:#d17461">1 image</span></h3>
  <p>
    45€  
  </p>
    <hr>
  <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

如何让圆圈像在桌面上一样好地计算文本？

Answer 1

一种方法是在屏幕尺寸较小时设置固定的宽度和高度。

第二个选项是在屏幕较小时减小字体大小。我已将 991px 设置为断点。您可以自己设置断点。

@media all and (max-width:991px){
.pricessquarered {
width:120px!important;
height:120px!important;
margin-bottom:10px!important;
}

.container{
flex-direction:column;
}

}

.container{
display:flex;
}

.pricessquarered {
  transition:all 0.3s;
  display:flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 16px #d17461;
  padding: 30px;
  width: 10vw;
  height: 10vw;
  color: #d17461;
  font-size: 22px;
  padding-top: 30px;
  border-radius: 100%;
}

<div class="container">
<div class="pricessquarered">
  <div>
    <h3><span style="color:#d17461">1 image</span></h3>
  <p>
    45€  
  </p>
    <hr>
  <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

<div class="pricessquarered" style="transition-delay:100ms;">
  <div>
    <h3><span style="color:#d17461">2 image</span></h3>
  <p>
    45€  
  </p>
    <hr>
  <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

<div class="pricessquarered" style="transition-delay:200ms;">
  <div>
    <h3><span style="color:#d17461">3 image</span></h3>
  <p>
    45€  
  </p>
    <hr>
  <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>
</div>

Answer 2

您可以将flex 应用到内部 .pricessquarered 的div，使用flex-direction: column 和一些其他设置（见下文）。您还需要删除其所有子元素的顶部和底部边距以将它们放入容器中：

.pricessquarered {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 16px #d17461;
  padding: 30px;
  width: 10vw;
  height: 10vw;
  color: #d17461;
  font-size: 22px;
  padding-top: 30px;
  border-radius: 100%;
}

.pricessquarered>div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 30px;
  padding-bottom: 30px;
}

.pricessquarered>div * {
  margin: 0;
}

<div class="pricessquarered">
  <div>
    <h3><span style="color:#d17461">1 image</span></h3>
    <p>
      45€
    </p>
    <hr>
    <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

附加说明：.pricessquarered 的flex 设置仅影响div，它是.pricessquarered 的直接子元素，而不影响其中的所有其他元素。它基本上只在其父元素中居中（可能是body，但我从您的代码中看不到）。所有其他元素的放置（文本居中除外）需要我在上面发布的其他设置。