htmlとCSSで入力フォームをレスポンシブ対応にする方法

レスポンシブウェブデザイン化するにあたって、inputによる入力フォームの長さがおかしくなったので改善した。

もともと以下のようなソースだったのだけど、

<input type="text" name="q" value="" size="40">

これではなぜかスマホでうまく表示されなかった。
（基準となるブロックの長さが定かでないとかかな？？？）

なので、以下のようにした。

<style>
@media only screen and (max-width : 640px){input{width:60%}}
</style>
<input type="text" name="q" value="" size="40">

これで、PC時はサイズ40で、スマホ時はサイズ60%で表示されるようになった。
（上記の場合、表示サイズが640px以下の場合「長さを60%にする」という設定）

もちろん、inputが複数ある時などは、以下のようにクラスを使ってあげると同じ事が可能。
元となるinputのサイズがパーセントではなくても、CSSが優先されるのでOK。

<style>
@media only screen and (max-width : 640px){
	.waku1{width:60%}
	.waku2{width:90%}
}
</style>
<input type="text" name="q" value="" size="40" class="waku1">
<input type="text" name="r" value="" size="78" class="waku2">

ちなみに、全デバイスで同じパーセンテージでサイズを指定するならば、

<style>
input{width:60%}
</style>
<input type="text" name="q" value="">

で良い。