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按钮。移动设备没有宽的垂直滚动条。

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

1 个答案: