Question

我网站上的便笺制作表格太宽，导致页面的其余部分缩小，请参阅flickr。我无法弄清楚原因，但我认为可能与使用fieldset元素来查看其他问题有关。但那实际上是正确的宽度？

找到

相关代码，html：

<meta name="viewport" content="width=device-width">
<form action="/notes/new" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="newnote">
  <fieldset class="note-ui">
    <legend>New Note</legend>
    <label for="in-reply-to" accesskey="r">Reply-to: </label><input type="text" name="in-reply-to" id="in-reply-to" placeholder="in-reply-to-1 in-reply-to-2 …">
    <label for="note" accesskey="n">Note: </label><textarea name="note" id="note" placeholder="Note"></textarea>
    <label for="webmentions" accesskey="w">Send webmentions: </label><input type="checkbox" name="webmentions" id="webmentions" checked="checked">
    <label for="twitter" accesskey="t">Twitter: </label><input type="checkbox" name="twitter" id="twitter">
    <label for="photo" accesskey="p">Photo: </label><input type="file" accept="image/*" value="Upload" name="photo" id="photo">
    <label for="locate" accesskey="l"></label><input type="button" name="locate" id="locate" value="Locate">
    <label for="kludge"></label><input type="submit" value="Submit">
    <div class="geo-status"></div>
  </fieldset>
</form>

CSS：

form {
    width: 100%;
}
fieldset {
    min-width: 0;
    width: 100%;
}

flickr：https://www.flickr.com/photos/22212133@N03/15659029727/

Answer 1

实现这一目标的最佳方法是，如果您不熟悉CSS媒体查询，或者只是想完成快速而肮脏的工作，那么实际使用引导程序。

如果您想要自定义作业，那么您可以为您认为将用于表单的每个设备添加自定义宽度的媒体查询：

示例：

/* Smartphones (portrait and landscape)*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

如果您看到/ *样式* /，您可以为每个查询添加自定义样式。

帮助许多人使用MQ的好网站是http://css-tricks.com/css-media-queries/

希望有所帮助！

表格不会缩小到我的iPhone屏幕的宽度

1 个答案: