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

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 
  </span></p>
  </div>
</div>

我怎样才能让圆圈像在桌面上一样好地计数文本？

Answer 1

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

第二个选项是当屏幕尺寸为 less.I 时减小字体大小 less.I 已设置 991px，因为 breakpoint.You 可以使用您自己的断点。

@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 
  </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 
  </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 
  </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 
  </span></p>
  </div>
</div>

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

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

Make a responsive circle with content inside

html

css

mobile

flexbox

responsive