输入文本字段和按钮宽度更改为动态

Question

我希望在调整屏幕大小时让我的文本字段的宽度可以改变动态，我的平均时间

@media (max-width: 767px) {
    #nameinput {width:auto;}                 
}
@media (min-width:1025px){
    #nameinput{  width:300pt;}                   
}
<div   style="left: 20px; width:805pt" >
     <label for="inputname"><b><%=bt%></b></label>
    <input id="nameinput" name="nameinput" style="font-size:10pt; text-transform: uppercase; ">
</div>

1. 但是根据屏幕尺寸，输入框确实突然变小了 （将max-width更改为更大的数字然后可以看到文本字段逐渐更改）

2. 当屏幕足够小导致标签和输入字段分成两行时，文本字段会再次变大

Answer 1

您可以在较小的屏幕上提供容器的<script src="https://cdnjs.cloudflare.com/ajax/libs/openpgp/2.5.11/openpgp.js"></script>，并在较大的屏幕上指定100% width。

300pt

Answer 2

使用以下css可以避免上面提到的问题

#nameinput{
                max-width: 300pt;
                width: 80%;
                min-width: 60pt;
               }