响应式表单

　　

　　响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：

　　

　　高级: 以下实例使用了CSS3 多媒体查询 来创建一个响应式表单。

　　

　　CSS 实例

　　

　　* {

　　

　　box-sizing: border-box;

　　

　　}

　　

　　input[type=text], select, textarea {

　　

　　width: 100%;

　　

　　padding: 12px;

　　

　　border: 1px solid #ccc;

　　

　　border-radius: 4px;

　　

　　resize: vertical;

　　

　　}

　　

　　label {

　　

　　padding: 12px 12px 12px 0;

　　

　　display: inline-block;

　　

　　}

　　

　　input[type=submit] {

　　

　　background-color: #4CAF50;

　　

　　color: white;

　　

　　padding: 12px 20px;

　　

　　border: none;

　　

　　border-radius: 4px;

　　

　　cursor: pointer;

　　

　　float: right;

　　

　　}

　　

　　input[type=submit]:hover {

　　

　　background-color: #45a049;

　　

　　}

　　

　　.container {

　　

　　border-radius: 5px;

　　

　　background-color: #f2f2f2;

　　

　　padding: 20px;

　　

　　}

　　

　　.col-25 {

　　

　　float: left;

　　

　　width: 25%;

　　

　　margin-top: 6px;

　　

　　}

　　

　　.col-75 {

　　

　　float: left;

　　

　　width: 75%;

　　

　　margin-top: 6px;

　　

　　}

　　

　　/* 清除浮动 */

　　

　　.row:after {

　　

　　content: "";

　　

　　display: table;

　　

　　clear: both;

　　

　　}

　　

　　/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */

　　

　　@media screen and (max-width: 600px) {

　　

　　.col-25, .col-75, input[type=submit] {

　　

　　width: 100%;

　　

　　margin-top: 0;

　　

　　}

　　

　　}