修复步进线响应式 css答案

【问题标题】：fix step line responsive css修复步进线响应式 css
【发布时间】：2017-01-20 15:23:54
【问题描述】：

这就是我想要达到的目标：

这是我的代码产生的：

.line {
  position: relative;
  background-color: #f1f1f1;
  width: 34%;
  height: 2px;
  bottom: 36px;
  left: 33%;
}

如何调整我的代码以使该行响应？

【问题讨论】：

使用 CSS3 媒体查询
请您使用当前代码创建minimal reproducible example

标签： javascript html css

【解决方案1】：

演示：https://jsfiddle.net/kc1tbu8x/2/

HTML：

<div class="wrapper">
<div class="step1">
  <hr/>
</div>

<div class="step2">
  <div class="step2_circles">1</div>
  <div class="step2_circles">2</div>
  <div class="step2_circles">3</div>
</div>
</div>

CSS：

.wrapper{
  width:30%;
  height:40px;
   display:block;
   position:relative;
}
.step1{
  width:98%;
  z-index:-9999;
  position:absolute;
  top:25%;
  display:block;
  margin:auto;

}
.step2{
  width:100%;
   display:flex;
  display:-webkit-flex;
  -webkit-justify-content: space-between;
    justify-content: space-between;
}
.step2_circles{
  width:40px;
  height:40px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  background:#ff0000;
  text-align:center;
  line-height:40px;

}

演示：https://jsfiddle.net/kc1tbu8x/2/

【讨论】：

【解决方案2】：

还有一种方法，不过我觉得上面的flexbox方案不错。演示：http://codepen.io/anon/pen/XppLjW

HTML：

<div class="steps">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

CSS：

.steps {
  width: 100%;
  height: 80px;
  max-width: 80%;
  margin: 3em auto;
  text-align: center;
  position: relative;
}
.steps::before {
  left: 0;
  top: 50%;
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  background-color: #e5e5e5;
}
.steps span {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  display: inline-block;
  background-color: #d4d4d4;
}
.steps span:first-child {
  left: 0;
}
.steps span:nth-child(2) {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.steps span:last-child {
  right: 0;
}

【讨论】：

【解决方案3】：

试试看，很好的例子

<div class="container">
  <div class="number">1</div>
  <div class="number">2</div>
  <div class="number">3</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.container:before {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  background:red;
}

.container .number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
}

JSfiddle 示例https://jsfiddle.net/4j07gbrd/

【讨论】：

【解决方案4】：

.line
{
  z-index:5;
  position: relative;
  background-color: #f1f1f1;
  width: 34%;
  height: 2px;
  bottom: 36px;
  left: 33%;
}
.yourcircle class
{
  z-index:4;
}

【讨论】：

【解决方案5】：

您可以将媒体查询添加到移动设备，因为条纹不能在移动设备上占 33% 的中心（整行 90%）

【讨论】：