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

Question

我正在为我的摄影服务设计一个网站，我想让价格显示在移动响应的圆圈中。

这是它在桌面上的外观：

桌面视图

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

移动视图

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

.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>

我将如何让圆圈像在 dekstop 上一样很好地计算文本？

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-direction: column和一些其他设置(见下文(将flex应用到.pricessquarered内部的div。您还需要删除其所有子元素的上边距和下边距，以使它们适合容器：

.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设置仅影响作为.pricessquarered的直接子元素的div，而不是其中的所有其他元素。它基本上只将该元素在其父元素内居中(这可能是body，但我无法从您的代码中看到这一点(。所有其他元素的位置(文本居中除外(需要我上面发布的其他设置。