asp net css 中的响应式按钮

Question

如标题所述。我有这个弹出窗口，我需要做出响应。现在，当我调整 window 大小时，按钮出于某种原因离开了 window。我已经使用 % 而不是像素，仍然没有。有人有建议吗？

CSS:

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-size: 13px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    margin-top: 200px;
    padding: 20px;
    border: 2px solid cornflowerblue;
    width: 21%;
    height: 10.5%;
    min-width: 400px;
    min-height: 15%;
}

.modalHdr {
    margin-left: -1px;
    font-size: 20px;
}

.popupConfirm {
    border: 1px #aaa;
    padding: 10px 82px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    margin: 20% 2px;
    cursor: pointer;
    background: lightgrey;
    color: black;
}

ASPX:

<div id="myModal" class="modal">
                <div class="modal-content">
                    <h3 class="modalHdr">
                        <asp:Label runat="server" Text="TRNSLTDelete Contact" />
                    </h3>
                    <asp:LinkButton ToolTip="TRNSLTNo" ID="ButtonNo" runat="server" Text="TRNSLTNo" CssClass="popupConfirm" />
                    <asp:LinkButton OnClick="ButtonYes_OnClick" ToolTip="TRNSLTYes" ID="ButtonYes" runat="server" Text="TRNSLTYes" CssClass="popupConfirm" />
                </div>
            </div>

Answer 1

尝试使用 VH 和 VW，https://css-tricks.com/viewport-sized-typography/ 和@media screen

asp net css 中的响应式按钮

responsive buttons in asp net css

css

c#

asp.net

popup

responsive