Html 如何使用媒体查询调整表单/表格的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18214062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize a form/table using media queries
提问by Ash Darko
Here is my code:
这是我的代码：
<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>
And i want to make the table and all its features smaller when viewed below 480px wide for small devices phones/etc. I don't know what to reference when using a media query:
对于小型设备手机/等，当在 480 像素以下宽时，我想让表格及其所有功能更小。我不知道在使用媒体查询时要引用什么：
@media only screen and (max-width: 480px) {
#table {
width: 100px;
}
This css above doesn't work, it resizes the div but the content is still original size even if i put the form in the div it still doesn't work, perhaps the div is not required anyway... any help would receive major kudos!!
上面的这个 css 不起作用，它调整了 div 的大小但内容仍然是原始大小，即使我将表单放在 div 中它仍然不起作用，也许无论如何不需要 div...任何帮助都会得到主要的赞！！
Thanks!
谢谢！
回答by Joe_G
You need to do a few things to make this work.
您需要做一些事情才能完成这项工作。
- First, that outer div isn't required so we can get rid of it.
- Second, you need to change the width of your table in the media query. I used a percentage value (for responsiveness) but you can set it to a pixel value if you desire (under 480px of course)
- Third, you need to set a width in your media query for the inputs/textarea. Without this, they will take up the widths specified in the 'size' attribute and will cause the horizontal scroll bar to appear.
- 首先，外部 div 不是必需的，因此我们可以摆脱它。
- 其次，您需要在媒体查询中更改表格的宽度。我使用了百分比值（用于响应），但如果您愿意，您可以将其设置为像素值（当然低于 480px）
- 第三，您需要在媒体查询中为输入/文本区域设置宽度。如果没有这个，它们将占用 'size' 属性中指定的宽度，并导致水平滚动条出现。
Here's the media query I used:
这是我使用的媒体查询：
@media only screen and (max-width: 480px) {
table {
width:95%;
}
input[type=text], textarea {
width:75%;
}
}
回答by Tiago
it doesn't work because your table has a style to, and that style is syaing the table has a width of 400px. Try to put this:
它不起作用，因为您的表格具有样式，并且该样式表明表格的宽度为 400 像素。试着把这个：
<table style="margin-top: 50px; margin-left: 20px; color: #FFF; width:100%">
instead of this:
而不是这个：
<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">
it wont work very well because you still have enought content to show in 100px...so i recomend you change the size to about 250px. If you really want it to have 100px i recomend you make the table in a diferent way.
它不会很好地工作，因为你仍然有足够的内容以 100px 显示......所以我建议你将大小更改为大约 250px。如果您真的希望它具有 100 像素，我建议您以不同的方式制作表格。
