如何製作按像素設置的div根據頁面調整大小？

我有一個使用箭頭的進度條，但我知道如何製作它的唯一方法是使用像素。所以我想知道是否有方法使用像素創建此進度欄，然後根據頁面更改其大小。我看過類似的問題，但沒有一個與我創建的元素類型有關。附加是酒吧目前的樣子，我希望能夠適應屏幕尺寸。如何製作按像素設置的div根據頁面調整大小？

.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>

來源

2017-07-25 P.Griffin

您能顯示您的HTML代碼嗎？另外 - 你可以用'vw'和'vh'來代替'px'來使你的進度條響應 – fen1x

..也就是說.'vertical-align：central;'不是一件東西。 –

@ fen1x我知道我可以使用這些，但我不知道如何爲我的情況做到這一點，因爲邊界不能使用％或vh或vw來改變它們的大小。 –

您可以利用vhvwvmin和vmax，讓您的進度條響應。請參閱this codepen

來源

2017-07-25 17:03:30 fen1x

這是完美的，非常感謝你！ –

如何製作按像素設置的div根據頁面調整大小？

回答

相關問題