在 CSS 和/或 jQuery 中创建响应式圆形边框

Question

我今天从我们的设计师那里得到了一份 PSD，其布局如下：

他们希望包含 3 个均匀分布的圆圈，它们也必须具有响应性。到目前为止，我尝试过的所有解决方案都失败了。

我现在的代码如下：

CSS（从 SCSS 编译）

 .section2 .info-box {
    float: left;
    display: block;
    margin-right: 10.1484%;
    width: 26.56773%; }
    /* line 89, /Users/chriswatson/.rvm/gems/ruby-2.1.5/gems/neat-1.7.2/app/assets/stylesheets/grid/_span-columns.scss */
    .section2 .info-box:last-child {
      margin-right: 0; }
    @media screen and (max-width: 992px) {
      /* line 84, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
      .section2 .info-box {
        float: left;
        display: block;
        margin-right: 38.19821%;
        width: 100%;
        margin-bottom: 40px;
        background-color: rgba(250, 250, 250, 0.1);
        padding: 15px; }
        /* line 89, /Users/chriswatson/.rvm/gems/ruby-2.1.5/gems/neat-1.7.2/app/assets/stylesheets/grid/_span-columns.scss */
        .section2 .info-box:last-child {
          margin-right: 0; } }
    /* line 94, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
    .section2 .info-box img {
      height: 90px;
      margin-bottom: 20px; }
    /* line 99, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
    .section2 .info-box h2 {
      font-size: 1.2em; }
    /* line 103, /Users/chriswatson/Sites/nuvi-website/source/stylesheets/index.css.scss */
    .section2 .info-box p {
      font-size: 18px; }

HTML

<div class="full-width">
        <h1>A Comprehensive Solution</h1>
        <div class="info-box">
          <div class="circle">
            <img src="/images/timer.png" alt="timer" />
            <h2>Real-Time</h2>
            <p>NUVI monitors 12 social networks and nearly 4 million RSS feeds in over 20 languages in Real Time.</p>
            <button class="learn-more">Learn More</button>
          </div>
        </div>
        <div class="info-box themiddleone">
          <div class="circle">
            <img src="/images/multi-monitors.png" alt="monitors" />
            <h2>Visualizations</h2>
            <p>Beautiful visualizations and dashboards make it easy to see actionable insights.</p>
            <button class="learn-more">Learn More</button>
          </div>
        </div>
        <div class="info-box">
          <div class="circle">
            <img src="/images/server.png" alt="server" />
            <h2>Reporting</h2>
            <p>Beautiful visualizations and dashboards make it easy to see actionable insights.</p>
            <button class="learn-more">Learn More</button>
          </div>
        </div>
    </div>

我怎样才能让这些圆圈如上图所示？

Answer 1

你可以用视口单位做到这一点

body {
  text-align: center;
}
div {
  width: 20vw;
  height: 20vw;
  margin: 2vw;
  border-radius: 50%;
  background: red;
  border: 1px solid grey;
  display: inline-block;
}

<div></div>
<div></div>
<div></div>

Answer 2

这是您需要的 CSS（大约）。当然，您必须根据您需要的规范进行媒体查询，但这只是一个示例。并在 jsfiddle 中对其进行测试，您可以扩大和缩短视图窗口以查看它的变化：

 .info-box {
    display: inline-block;
    width: 29.5%;
    height: auto;
    border: 1px solid #FFF;
       padding: 100px;

}
.circle img {
    height: 70vh;
    margin-bottom: 20px;
    border-radius:50%;

}

@media screen and (max-width: 800px){
    .circle img{
       height: 40vh;   
    }
}

DEMO