ページ単位でピクセル単位で設定された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] 
} 

あなたはあなたの進行状況バーが応答するためにvhvwvminとvmaxを利用することができ、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

。 this codepen