输入文本字段和按钮的宽度变化动态

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. 但输入框也突然变得小不逐步根据屏幕尺寸
   （变化最大宽度：一些更大数量然后可以看到文本字段逐渐改变）

2. 当屏幕小到足以导致标签和输入框分开两行文本字段变得非常大再次

Answer 1

使用以下的CSS可以避免我提到上面％

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

Answer 2

您可以在小屏幕上给你的容器100% width并指定你的大屏幕300pt。

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