CSS - 表格不会在移动设备上缩小答案

【问题标题】：CSS - Form not scaling down on mobileCSS - 表格不会在移动设备上缩小
【发布时间】：2017-11-10 23:28:21
【问题描述】：

这里有新的编码器。我有一个在网络上完全按照我想要的方式缩放的表单，但在移动设备上看起来很糟糕。表格没有缩小。我希望表单根据移动设备的宽度缩小。任何想法或建议将不胜感激。我在下面包含了 HTML 和 CSS。谢谢！另外，我更喜欢在 CSS 中执行此操作。 HTML：

<div class="contactForm">
<form id="form" class="topBefore" method="POST" action="#">         
<input id="name" type="text" name="name" placeholder="NAME">
<input id="phone" type="tel" name="phone" placeholder="PHONE">
<input id="email" type="email" name="email" placeholder="E-
MAIL">
<textarea id="messagebody" type="text" name="message" 
placeholder="MESSAGE"></textarea>
<input id="submit" type="submit" name="send" value="SEND">
</form>
</div>

CSS：

.contactForm {
background-color: #FAFAFA;
width: 100%;
margin: 0 auto;
}

#form {
position: relative;
width: 500px;
margin: 0 auto;
padding-bottom: 20px;
}

input {
width: 470px;
height: 50px;
padding: 0px 15px 0px 15px;
background: transparent;
outline: none;
font-size: 14px;
color: black;
border: solid 2px #dddddd;
border-bottom: none;
letter-spacing: 2px;
background-color: white;
}

input:hover {
background: #f4f4f4;
font-size: 14px;
color: black;
letter-spacing: 2px;
border-color: #e5e5e5;
}

textarea {
width: 470px;
max-width: 470px;
height: 110px;
max-height: 110px;
padding: 15px;
letter-spacing: 2px;
background: transparent;
outline: none;
font-size: 14px;
color: #333;
background-color: white;
border: solid 1px #dddddd;
border: solid 2px #dddddd;
}

textarea:hover {
background: #f4f4f4;
color: black;
}

#submit {
width: 504px;
padding: 0;
margin: -6px 0px 0px 0px;
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #333;
outline:none;
cursor: pointer;
border-top: none;
letter-spacing: 3px;
border: solid 2px #dddddd;
}

#submit:hover {
background-color: #7fbf7f;
color: black;
letter-spacing: 3px;
font-size: 15px;
border-color: #7fbf7f;
}

【问题讨论】：

标签： html css

【解决方案1】：

尝试使用媒体查询：

当您想要根据设备的一般类型（例如打印与屏幕）、特定特征（例如浏览器视口的宽度）或环境（例如环境光条件）应用 CSS 样式时，媒体查询非常有用)。由于当今可用的互联网连接设备种类繁多，媒体查询是构建网站和应用程序的重要工具，这些网站和应用程序足够强大，可以在用户拥有的任何硬件上运行。

例子：

@media screen and (max-width: 699px) and (min-width: 520px)

把它放在你的head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1">

这意味着浏览器将（可能）以自己屏幕的宽度呈现页面的宽度。因此，如果该屏幕是 320 像素宽，浏览器窗口将是 320 像素宽，而不是缩小并显示 960 像素（或该设备默认执行的任何操作，以代替响应式元标记）。

还有：https://css-tricks.com/snippets/html/responsive-meta-tag/

【讨论】：

感谢您提供详细信息，非常感谢。我实际上在我的 head 标签中有它，但由于某种原因，表单粘在页面之外。
你在使用媒体查询吗？
我相信吗？我的标题标签中有它。你能根据上面的代码举一个例子吗？再次感谢。
你有媒体查询或视口元标记，还是两者都有？
我有这个元标记：

【解决方案2】：

使用移动查询：允许根据设备应用指定的 CSS https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

你可以使用这个常用的设备断点。

【讨论】：

【解决方案3】：

您还可以四处寻找响应式电子邮件模板，这些模板可以消除电子邮件开发带来的许多挫败感。

处理所有不同的电子邮件客户端以及它们在呈现电子邮件和支持最新 CSS 方面的巨大差异可能需要很长时间才能进行故障排除，并且在流程结束时让您大吃一惊。

这是一个很棒的两列解决方案https://mangools.com/blog/how-to-create-responsive-two-column-email-template/，但您也可以搜索其他的。

使用内联 CSS 的工具也很好。并非所有电子邮件客户端都支持电子邮件头部的 css，因此为了确保将样式应用到您想要的位置，最好将它们内联移动。 Mailchimp 有一个内联工具，您可以在这里免费使用 https://templates.mailchimp.com/resources/inline-css/ 尽管还有其他工具。

【讨论】：