如何使輸入表響應和適應性設計在HTML

Question

請幫助我，如何讓執行以下操作： 輸入方式（輸入形式應包括輸入並提交HTML元素）應該是100％的寬度（有一些小填充）在平板電腦和更小的設備上。在桌面上，它應該佔用50％的寬度並且水平居中。

例如：

desktop

tablets

Answer 1

這應該工作。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    max-width: 601px; 
 
    margin: 0 auto; 
 
} 
 
.left { 
 
    overflow: hidden; 
 
    min-height: 25px; 
 
    border: 1px dashed #f0f 
 
} 
 
.right { 
 
    float: right; 
 
    width: 80px; 
 
    min-height: 25px; 
 
    border: 1px dashed #00f 
 
} 
 
input { 
 
    width: 100%; 
 
    padding: 5px; 
 
} 
 
button { 
 
    width: 100%; 
 
    padding: 5px; 
 
}

<div class="container"> 
 
    <div class="right"> 
 
    <button>Search</button> 
 
    </div> 
 
    <div class="left"> 
 
    <input type="text" /> 
 
    </div> 
 
</div>

這裏是一個JSfiddle也。