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

当我在我们的网站上调整屏幕大小时，我对正在发生的事情感到困惑。 我的任务是改变搜索栏的大小，这样当我们切换到手机大小的屏幕时，它就会占据大部分屏幕。当我点击某个屏幕宽度范围时，GO按钮会下降到搜索文本框下方。下面是屏幕截图、html和css。我不明白的另一件事是，既然我使用了百分比宽度，为什么会发生这种行为。我想我解决这个问题的办法是随着屏幕宽度的减小，减少文本的百分比。但是当我用Chrome检查屏幕时，问题就消失了！任何关于百分比宽度为何不能正常工作的见解都将不胜感激。谢谢

---

首先，感谢拉贾玛基建议使用大众汽车而不是%的汽车。我学到了一项很有价值的技术，而且效果相当不错。然而，对于最终批准的人来说，这仍然不够好。所以我进一步挖掘，发现当我改变屏幕宽度时，按钮的大小没有改变。最终起作用的是确定按钮宽度并从屏幕宽度中减去按钮宽度，如下所示：

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

您可能应该在父元素上使用vw视口宽度和vh视口高度，而不是%来调整大小？或更好！只要车身{高度：100vh；宽度：100vw}就行了，希望一切都能正常工作，并在不使用宽度：94vw时对其进行调整；解决了我的问题！非常感谢你。我仍然在学习如何使页面适应移动设备和改变屏幕大小。我能够减少最大宽度调整到只有4个保存代码。没问题！只要继续制作，尽可能远离框架！！！适应前端framworks非常耗时。。我花了48小时用vue将小的多页网站转换成单页应用程序，但我不太满意，所以我选择了react，又花了48小时。。。偏离正轨。。你应该尽可能多地使用香草语言为任何人制作任何东西，当你在没有从网上查找东西的情况下制作出很棒的东西时，你就可以尝试新的东西了。在那之前我不推荐。享受编码的乐趣！：D

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