如何使用媒体查询调整表单/表的大小

Question

这是我的代码:

<form name="htmlform" method="post" action="html_form_send.php">
<div id="table">
<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">
</tr>
<tr>
<td valign="top">
<label for="name">Name *</label>
</td>
<td valign="top">
<input  type="text" name="name" maxlength="50" size="30" style="margin-bottom: 10px">
</td>
</tr>


<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input  type="text" name="email" maxlength="80" size="30" style="margin-bottom: 10px">
</td>

</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input  type="text" name="telephone" maxlength="30" size="30" style="margin-bottom:    10px">
</td>
</tr>
<tr>
<td valign="top">
<label for="enquiry">Enquiry *</label>
</td>
<td valign="top">
<textarea  name="enquiry" maxlength="1000" cols="32" rows="6"></textarea>
</td>

</tr>
<tr>
<td colspan="2" style="text-align:center">

<input type="submit" value="Submit">  
</td>
</tr>
</table>
</div>
</form>

我希望在低于480px宽度的小型设备手机/等下观看桌子及其所有功能.我不知道在使用媒体查询时要引用什么:

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

#table {
width: 100px;


}

上面的这个CSS不起作用,它调整div的大小,但内容仍然是原始大小,即使我把表格放在div中它仍然不起作用,也许div不是必需的...任何帮助都会收到主要荣誉!

谢谢!

Answer 1

你需要做一些事情来完成这项工作.

• 首先,不需要外部div,所以我们可以摆脱它.
• 其次,您需要在媒体查询中更改表的宽度.我使用了一个百分比值(用于响应)但你可以根据需要将其设置为像素值(当然低于480px)
• 第三,您需要在媒体查询中为输入/ textarea设置宽度.如果没有这个,它们将占用'size'属性中指定的宽度,并将显示水平滚动条.

这是我使用的媒体查询:

@media only screen and (max-width: 480px) {
    table {
        width:95%;
    }
    input[type=text], textarea {
        width:75%;
    }
}

演示:http://jsfiddle.net/hABGX/2/