如何使用css获得标签和输入的响应宽度

Question

我已经使用我的表单完成了以下操作：

当我把它放在大屏幕上时，一切都很好。但是当我在浏览器中的ripple模拟器中测试它时，我得到了这个，屏幕大小为240x320：

这是我的CSS：

.inputbox{
            width: 80%;
            border: 1px solid #d4d4d4;
            border-bottom-right-radius: 2em;
            border-top-right-radius: 2em;
            box-shadow: inset 0px 2px 2px #ececec;
            display: inline;
            padding: 8px;
            font-size: 100%;
            margin-top: 0px;
            margin-bottom: 1%;
        }

        .labelbox{
            border-bottom-left-radius:2em;
            border-top-left-radius: 2em;
            padding: 8px;
            display: block;
            border: 1px solid #d4d4d4;
            background: #e9f939; /* Old browsers */
            padding-right: 5px;
            color:black;
            float:left;
            width:17.5%;
            text-align: center;
        }

这是我的HTML：

<label class="labelbox" for="textareacontactus">Enter Title*</label>
<input type="text" class="inputbox" data-role="none" ng-model="searchtitle" name="searchtitle" id="searchtitle" required>

    <label class="labelbox" for="searchauthor">Enter Author</label>
    <input type="text" class="inputbox" data-role="none" name="searchauthor" id="searchauthor">

    <label class="labelbox" for="searchpublisher">Enter Publisher</label>
    <input type="text" class="inputbox" data-role="none" name="searchpublisher" id="searchpublisher">

    <label class="labelbox" for="searchedition">Enter Edition</label>
    <input type="text" class="inputbox" data-role="none" name="searchedition" id="searchedition" ng-model="searchedition" ng-pattern="/^[0-9]+$/">

现在在CSS中我使用了宽度但是使用了％。所以我不明白为什么这样做？我假设使用％它相对于屏幕大小总是占20％，因为如果是这种情况那么为什么它会在模拟器上执行此操作？这种响应式设计的最佳实践是什么？

Answer 1

您可以使用@media (max-width: 767px)，例如{{1}}

您可以尝试的另一件事是使用像我在现有代码中制作的JSFiddle中的HTML表：media queries