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

我想让我的文本字段的宽度可以改变动态调整屏幕大小时，在同一时间我有

@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>

@介质（最大宽度：767px）{
#名称输入{宽度：自动；}
}
@介质（最小宽度：1025px）{
#名称输入{宽度：300pt；}
}

但是输入框突然变小，并不是根据屏幕大小逐渐变小
（将最大宽度更改为更大的数字，然后可以看到文本字段逐渐更改）

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

---

您可以在较小的屏幕上显示容器的

100%宽度

，在较大的屏幕上显示指定的

300pt

@media (max-width: 767px) {
    #nameinput {width:100%;}
}
@media (min-width:1025px){
    #nameinput{  width:300pt;}             
} 

---

您可以在较小的屏幕上显示容器的

100%宽度

，在较大的屏幕上显示指定的

300pt

@media (max-width: 767px) {
    #nameinput {width:100%;}
}
@media (min-width:1025px){
    #nameinput{  width:300pt;}             
} 

---

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

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

---

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

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

---

以%表示宽度，这样它会改变动态性。相对单位如@HirenPatel建议的%或em。绝对单位如px或pt是刚性的——您打算用打印机打印此表单吗？如果您计划使用打印机，pt单位是最好的，但在屏幕上显示最差（实际上可能是最差的）。以%表示宽度，这样它会改变动态。如@HirenPatel建议的%或em，相对单位是最好的。绝对单位如px或pt是刚性的——您计划使用打印机打印此表单吗？如果您计划使用打印机，pt单元是最好的，但在屏幕上显示最差（实际上可能是最差的）。文本字段看起来仍然像更改，或者没有更改，或者减少到一半。您是否添加了此元标记我的文本字段看起来仍然像更改，或者没有更改，或者减少到一半。您是否添加了我的此元标记