使用uikit和CSS的响应式进度圈

Question

  

  .booking{
         background-color: #f8f8f8;
    }
    .circle-text {
      display: block;
        margin: auto;
        height: 150px;
        width: 150px;
        text-align: center;
        vertical-align: middle;
        border-radius: 50%;
        background:green ;
        color: #fff;
        font: 12px "josefin sans", arial;
        line-height: 150px;
        z-index: 1;
        position: relative;
    }
@media  screen and (min-width: 320px) and (max-width:800px) {
  .circle-text{
    height:70px;
    width:70px;
    line-height:70px;
}
}
@media screen and (min-width:320px) and (max-width:800px){
   .steps:not(:first-child)::before {
        content: "";
     
        top: 37px;
   

    } 
}

    .step:nth-child(2) .circle-text {
      background: grey;
    }
    .step:nth-child(3) .circle-text {
      background: grey;
    }
    .a {
      display: inline-block;
      position: relative;  
    }
    .uk-process-step {
        position: relative;
    }
    .step:not(:first-child)::before {
        content: "";
        
        left: -50%;
        position: absolute;
        top: 77px;
        width: 100%;
        border-bottom: 5px solid grey;
    }
    .step.active ~ .step:before {
        border-bottom: 5px dotted grey;
    }
    .uk-process-step .uk-width-1-3 {
        position: relative;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
    <section class=" booking">
     <div class="uk-container  uk-container-expand uk-padding-large">
       <div class="uk-text-center uk-process-step" uk-grid>
         <div class="uk-width-1-3 step circle">
           <div class="circle-text ">
             <i class="medium  material-icons">Step 1</i>
           </div>
           <p class="center-align  uk-margin-top">Choose Your Trip</p>
         </div>
         <div class="uk-width-1-3 step active">
           <div class="circle-text a">
             <i class="medium material-icons">Step 2</i>
           </div>
           <p class="center-align uk-margin-top ">Request for reservation</p>
         </div>
         <div class="uk-width-1-3 step  ">
           <div class="circle-text ">
             <i class="medium material-icons">Step 3</i>
           </div>
           <p class="center-align  uk-margin-top">Successfully</p>
         </div>
       </div>
     </div>
    </section>
enter code here

我想使用纯CSS和uikit 3制作响应式进度栏。我编写的这段代码是在桌面模式下显示时起作用的。当我将桌面模式切换为移动模式时，线路没有响应。线路下降。但是，即使在台式机模式和移动模式下，我也希望这些圆的中间位置。

Answer 1

使用media queries并定义breakpoints

尝试一下。

.booking{
     background-color: #f8f8f8;
}
.circle-text {
  display: block;
    margin: auto;
    height: 150px;
    width: 150px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background:green ;
    color: #fff;
    font: 12px "josefin sans", arial;
    line-height: 150px;
    z-index: 1;
    position: relative;
}

.step:nth-child(2) .circle-text {
  background: grey;
}
.step:nth-child(3) .circle-text {
  background: grey;
}
.a {
  display: inline-block;
  position: relative;  
}
.uk-process-step {
    position: relative;
}
.step:not(:first-child)::before {
    content: "";
    
    left: -50%;
    position: absolute;
    top: 77px;
    width: 100%;
    border-bottom: 5px solid grey;
}
.step.active ~ .step:before {
    border-bottom: 5px dotted grey;
}
.uk-process-step .uk-width-1-3 {
    position: relative;
}

@media screen and (max-width:767px)
{
  .circle-text{
    width:120px;
  height:120px;
    line-height: 120px;
  }
  .step:not(:first-child)::before{
    top:60px;
  }
}

@media screen and (max-width:480px)
{
   .circle-text{
    width:100px;
  height:100px;
     line-height: 100px;
  }
  .step:not(:first-child)::before{
    top:50px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<section class=" booking">
 <div class="uk-container  uk-container-expand uk-padding-large">
   <div class="uk-text-center uk-process-step" uk-grid>
     <div class="uk-width-1-3 step circle">
       <div class="circle-text ">
         <i class="medium  material-icons">Step 1</i>
       </div>
       <p class="center-align  uk-margin-top">Choose Your Trip</p>
     </div>
     <div class="uk-width-1-3 step active">
       <div class="circle-text a">
         <i class="medium material-icons">Step 2</i>
       </div>
       <p class="center-align uk-margin-top ">Request for reservation</p>
     </div>
     <div class="uk-width-1-3 step  ">
       <div class="circle-text ">
         <i class="medium material-icons">Step 3</i>
       </div>
       <p class="center-align  uk-margin-top">Successfully</p>
     </div>
   </div>
 </div>
</section>