屏幕调整大小时css百分比宽度无法正常工作

Question

我对在我们网站上调整屏幕大小时发生的事情感到困惑。 我的任务是更改搜索栏的大小，以便在我们切换到移动大小的屏幕时它会填满大部分屏幕。当我达到一定范围的屏幕宽度时，GO 按钮会下降到搜索文本框下方。下面是屏幕截图，html和css。我不明白的另一件事是为什么会发生这种行为，因为我使用的是百分比宽度。我想我通过随着屏幕宽度的减小而减少文本的百分比来解决这个问题。但是当我在 Chrome 中检查屏幕时，问题就消失了！任何关于为什么百分比宽度不能正常工作的见解将不胜感激。谢谢。

    .mobilesearch .searchrow {
    width: 100%;
}

@media only screen and (max-width: 1180px) {
    .headersearchbox {
        /*width: 650px !important;*/
        width: 94%!important;
        display: inline!important;
    }
    .searchbutton {
        /*width: 60px!important;*/
        width: 3%!important;
        display: inline;
        margin-left: -5px;
        margin-top: 1px;
    }
}

@media only screen and (max-width: 1048px) {
    .headersearchbox {
        width: 87%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}

@media only screen and (max-width: 627px) {
    .headersearchbox {
        width: 86%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}

@media only screen and (max-width: 570px) {
    .headersearchbox {
        width: 85%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}

@media only screen and (max-width: 523px) {
    .headersearchbox {
        width: 84%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}

@media only screen and (max-width: 482px) {
    .headersearchbox {
        width: 83%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}

@media only screen and (max-width: 448px) {
    .headersearchbox {
        width: 82%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}

@media only screen and (max-width: 418px) {
    .headersearchbox {
        width: 81%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}

@media only screen and (max-width: 392px) {
    .headersearchbox {
        width: 80%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}

@media only screen and (max-width: 348px) {
    .headersearchbox {
        width: 79%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}

@media only screen and (max-width: 330px) {
    .headersearchbox {
        width: 78%!important;
    }
    .searchbutton {
        width: 3%!important;
    }
}





          <!--Mobile-->
    <asp:Panel ID="PanelSearchMobile" runat="server" DefaultButton="btnSearchMobile" CssClass="row collapse search">
        &nbsp;<br />
        <div class="small-12 columns hideforhighres searchrow">

                            <asp:TextBox
                                ID="KeywordFieldMobile"
                                runat="server"
                                BackColor="white"
                                BorderColor="black"
                                ForeColor="black"
                                maxlength="100"
                                CssClass="headersearchbox"
                                placeholder="Search Products">
                            </asp:TextBox>

                           <asp:LinkButton ID="btnSearchMobile" CssClass="searchbutton" 
                                runat="server" > Go</asp:LinkButton>
</div>
    <!--End of Mobile-->

Answer 1

首先感谢 J. Rajamaki 提出使用 vw 代替 % 的建议。我学到了一项有价值的技术，而且效果很好。但是，对于最终批准的人来说，这仍然不够好。所以我进一步挖掘，发现按钮没有改变尺寸，因为我改变了屏幕宽度。最终起作用的是确定按钮宽度并从屏幕宽度中减去它，如下所示：

    .mobilesearch .searchrow {
    width: 100vw;
}

@media only screen and (max-width: 1180px) {
    .headersearchbox {
        /*width: 650px !important;*/
        width: calc(100% - 64px)!important;
        display: inline!important;
    }
    .searchbutton {
        width: 64px!important;
        /*width: 3vw!important;*/
        display: inline;
        margin-left: -5px;
        margin-top: 1px;
    }
}

@media only screen and (max-resolution: 96dpi) {
    .mobilesearch .searchrow {
        width: 99vw;
    }
}

我希望这可以帮助其他有类似问题的人。对于您自己的网站，我会尝试不使用重要标签。我们的网站很旧，并且有许多需要重要标签的覆盖。测试最大分辨率的最后一个更改：96dpi 是测试台式机而不是移动设备的技巧。这会减少包含的 div，以便垂直滚动条不会切断已调整大小的桌面屏幕上的 GO 按钮。移动设备没有宽的垂直滚动条。