Css表单进度栏样式问题
我有这段代码，
<style media="screen">
div,
span {
box-sizing: border-box;
}
.amg-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.amg-progress-bar {
display: flex;
}
.amg-step {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
min-width: 249px;
color: #999;
}
.amg-step_marker {
margin: 10px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ddd;
border-radius: 50%;
}
.amg-step_marker_content {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
pointer-events: none;
}
.amg-step_marker_icon {
display: none;
width: 15px;
height: 15px;
}
.amg-step_wing {
width: calc(100% - 32px + 8px);
height: 10px;
position: absolute;
left: calc(50% - 13px + 50px / 2);
bottom: 21px;
border-top: 4px solid #ddd;
border-bottom: 4px solid #ddd;
background-color: #ddd;
z-index: 1;
}
.amg-step:last-child .amg-step_wing {
display: none;
}
.amg-step.\--active {
color: #ff8d00;
}
.amg-step.\--active .amg-step_marker:hover {
box-shadow: 0 0 8px 1px #ff8d00;
}
.amg-step.\--active .amg-step_marker_content {
background-color: #ff8d00;
color: #fff;
}
.amg-step.\--active .amg-step_wing {
background: linear-gradient(to right, #ff8d00, #dddddd);
}
.amg-step.\--complete .amg-step_marker {
cursor: pointer;
}
.amg-step.\--complete .amg-step_marker:hover {
box-shadow: 0 0 8px 1px #39d084;
}
.amg-step.\--complete .amg-step_marker_content {
background-color: #39d084;
color: #fff;
}
.amg-step.\--complete .amg-step_marker_number {
display: none;
}
.amg-step.\--complete .amg-step_marker_icon {
display: block;
}
.amg-step.\--complete .amg-step_wing {
background-color: #39d084;
}
.amg-step.\--previous .amg-step_wing {
background: linear-gradient(to right, #39d084, #ff8d00);
}
</style>
<div class="amg-container">
<div class="amg-progress-bar">
<div class="amg-step --complete">
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<div class="amg-step_marker_number">1</div>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
<div class="amg-step_wing"></div>
</div>
<div class="amg-step --active">
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<span class="amg-step_marker_number">2</span>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
<div class="amg-step_wing"></div>
</div>
<div class="amg-step">
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<span class="amg-step_marker_number">3</span>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
<div class="amg-step_wing"></div>
</div>
<div class="amg-step">
<div class="amg-step_wing"></div>
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<span class="amg-step_marker_number">4</span>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
</div>
<div class="amg-step">
<div class="amg-step_wing"></div>
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<span class="amg-step_marker_number">5</span>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
</div>
</div>
</div>
目前显示此
我可以使用最小宽度更改进度条，使其看起来像这样（从120px更改为249px）
问题是，使用pc不允许不同类型的屏幕正确地查看宽度，例如我正在Mac屏幕上进行开发，但是当我将它转移到我的第二个屏幕（27英寸）时，它无法正确显示！
我尝试将px更改为无效的％。
有什么想法吗？
由于
2 个答案:
答案 0 :(得分：0)
刚刚回答了这个问题！
使用以下代码正常工作
<style media="screen">
div,
span {
box-sizing: border-box;
}
.amg-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.amg-progress-bar {
display: flex;
}
.amg-step {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
min-width: 20%;
color: #999;
}
.amg-step_marker {
margin: 10px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ddd;
border-radius: 50%;
}
.amg-step_marker_content {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
pointer-events: none;
}
.amg-step_marker_icon {
display: none;
width: 15px;
height: 15px;
}
.amg-step_wing {
width: calc(100% - 32px + 8px);
height: 10px;
position: absolute;
left: calc(50% - 13px + 50px / 2);
bottom: 21px;
border-top: 4px solid #ddd;
border-bottom: 4px solid #ddd;
background-color: #ddd;
z-index: 1;
}
.amg-step:last-child .amg-step_wing {
display: none;
}
.amg-step.\--active {
color: #ff8d00;
}
.amg-step.\--active .amg-step_marker:hover {
box-shadow: 0 0 8px 1px #ff8d00;
}
.amg-step.\--active .amg-step_marker_content {
background-color: #ff8d00;
color: #fff;
}
.amg-step.\--active .amg-step_wing {
background: linear-gradient(to right, #ff8d00, #dddddd);
}
.amg-step.\--complete .amg-step_marker {
cursor: pointer;
}
.amg-step.\--complete .amg-step_marker:hover {
box-shadow: 0 0 8px 1px #39d084;
}
.amg-step.\--complete .amg-step_marker_content {
background-color: #39d084;
color: #fff;
}
.amg-step.\--complete .amg-step_marker_number {
display: none;
}
.amg-step.\--complete .amg-step_marker_icon {
display: block;
}
.amg-step.\--complete .amg-step_wing {
background-color: #39d084;
}
.amg-step.\--previous .amg-step_wing {
background: linear-gradient(to right, #39d084, #ff8d00);
}
</style>
<div class="amg-container">
<div class="amg-progress-bar" style="width:100%">
<div class="amg-step --complete">
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<div class="amg-step_marker_number">1</div>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
<div class="amg-step_wing"></div>
</div>
<div class="amg-step --active">
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<span class="amg-step_marker_number">2</span>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
<div class="amg-step_wing"></div>
</div>
<div class="amg-step">
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<span class="amg-step_marker_number">3</span>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
<div class="amg-step_wing"></div>
</div>
<div class="amg-step">
<div class="amg-step_wing"></div>
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<span class="amg-step_marker_number">4</span>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
</div>
<div class="amg-step">
<div class="amg-step_wing"></div>
<div class="amg-step_marker">
<div class="amg-step_marker_content">
<span class="amg-step_marker_number">5</span>
<div class="amg-step_marker_icon">
<svg viewBox="0 0 1792 1792"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/></svg>
</div>
</div>
</div>
</div>
</div>
</div>
对于无法在进度条上看到更改为width:100%且minwidth:20%
答案 1 :(得分：-1)
尝试使用媒体查询指定不同屏幕尺寸的宽度。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？