如何根据页面调整以像素为单位设置的div？

Question

我有一个使用箭头的进度条，但我知道如何制作它的唯一方法是使用像素。所以我想知道是否有办法使用像素创建此进度条，然后根据页面更改其大小。我看过类似的问题，但没有一个与我正在创建的元素类型有关。附件是酒吧目前的样子，我希望能够使其适应屏幕尺寸。

.containerr {
  font-family: 'Lato', sans-serif;
  float: left;
  position: relative;
  width: 70%;
  height: 100%;
}

.wrapperr {
  float: left;
  width: 70%;
  height: 100%;
  position: relative;
  /*overflow:auto;*/
}

.pull-right {
}

a:hover {
  color: #999;
}

/* Breadcrups CSS */
.arrow-steps {
  zoom: 1.4;
  position: relative;
  display: inline-flex;
  vertical-align: top;
}
.arrow-steps .step {
  font-size: 100%;
  text-align: center;
  color: #666;
  cursor: default;
  margin: 0 3px;
  padding: 10px 10px 10px 30px;
  min-width: 180px;
  float: left;
  position: relative;
  background-color: #d9e3f7;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color 0.2s ease;
}
.arrow-steps .step:after, .arrow-steps .step:before {
  content: " ";
  position: absolute;
  top: 0;
  right: -17px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 17px solid #d9e3f7;
  z-index: 2;
  transition: border-color 0.2s ease;
}

.arrow-steps .step:before {
  right: auto;
  left: 0;
  border-left: 17px solid #333;
  z-index: 0;
}

.arrow-steps .step:first-child:before {
  border: none;
}

.arrow-steps .step:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.arrow-steps .step span {
  position: relative;
}

.arrow-steps .step span:before {
  opacity: 0;
  content: "✔";
  position: absolute;
  top: -2px;
  left: -20px;
}

.arrow-steps .step.done span:before {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease 0.5s;
  -moz-transition: opacity 0.3s ease 0.5s;
  -ms-transition: opacity 0.3s ease 0.5s;
  transition: opacity 0.3s ease 0.5s;
}

.arrow-steps .step.current {
  color: #fff;
  background-color: #23468c;[![enter image description here][1]][1]
}

HTML

<div class="containerr">
  <div class="wrapperr">
    <div class="arrow-steps clearfix">
      <div runat="server" id="first" class="step">
        <asp:LinkButton ID="machineLink" CssClass="arrowTexts" runat="server" OnClick="machineLink_Click" OnClientClick="getCoordinates()">Safety</asp:LinkButton>
      </div>
      <div runat="server" id="second" class="step">
        <asp:LinkButton ID="estopLink" CssClass="arrowTexts" runat="server" OnClick="estop_Click" OnClientClick="getCoordinates()">Estop Reset
        </asp:LinkButton>
      </div>
      <div runat="server" id="third" class="step">
        <asp:LinkButton ID="startLink" CssClass="arrowTexts" runat="server" OnClick="start_Click" OnClientClick="getCoordinates()">Start</asp:LinkButton>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用vh vw vmin和vmax来提升您的进度条。 见this codepen