我正在做一个敏感的设计。我打了一个墙，没有足够的空间用于输入框，它的标签。所以我决定把标签隐藏在较小的屏幕尺寸上。
目前，它的占位符文本中包含您的电子邮件，但我只想在屏幕上不到400(宽达399像素宽)加入我们的通讯不同的地方。
我估计需要一些JS来执行这个，而不是任何CSS。
主要有：
如果屏幕尺寸小于400：
占位符text =加入我们的通讯
其他：
占位符text =您的电子邮件。
这是我有的HTML：
<div id="mc_embed_signup"> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your Email"> </div>
解决方法
作为一个纯CSS解决方案，我们可以有两个< input> s – 具有不同的占位符 – 以不同的屏幕大小显示 –
Example here：
input.large { display: inline-block; }
input.small { display: none; }
@media (max-width: 399px) {
input.large { display: none; }
input.small { display: inline-block; }
}
<input type="email" name="email[]" class="required email large" id="mce-EMAIL" placeholder="Your Email"> <input type="email" name="email[]" class="required email small" placeholder="Join our newsletter">
重要笔记：
>在这种情况下，我们应该确保我们两个输入的id不同。此外，如果id被添加到< input>只是因为它用于标签元素，我们可以用标签替换输入。
>使用多个具有相同名称的输入，将覆盖HTTP请求方法中的名称/值对。
一个可能的解决方案是使用名称属性的数组名称值(如上面的示例)，并在服务器端处理它(最好将名称值保留为小写)。
或者，我们可以禁用隐藏的输入，以防止将其值发送到服务器：
$('input:hidden').prop("disabled",true);
在纯CSS解决方案中使用JavaScript？也许…也许不是…但现在世界上没有网站没有JavaScript。如果这有助于摆脱这个问题，那么让手有点脏！
