input text field and button width change dynamic

I want to let my text field's width can change dynamic when resize the screen , at mean time I have

@media (max-width: 767px) {
            #nameinput {width:auto;}

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


            }
<input id="nameinput" name="nameinput" style="font-size:10pt; text-transform: uppercase; ">

But the input box did is suddenly become small is not progressively according the screen' size