我正在研究响应式设计。我撞到了一点墙，没有足够的空间放一个input盒子，它是label。所以我决定在较小的屏幕尺寸上隐藏标签。
目前它your email里面有占位符文本，但我只想要在小于 400 的屏幕上（所以最多 399px 宽）一个不同的Join our newsletter.
我认为需要一些 JS 来执行此操作，而不是使用 CSS。
本质上：如果屏幕尺寸小于 400：占位符文本 = 加入我们的时事通讯
其他：占位符文本=您的电子邮件。
这是我拥有的 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 - 具有不同placeholder的 s - 以不同的屏幕尺寸显示 -此处示例：
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我们的两个inputs 是不同的。此外，Ifid被添加到<input>只是因为它用于label元素，我们可以将inputby包装起来label。
使用多个input具有相同的name，将覆盖name/valueHTTP 请求方法中的对。
一种可能的解决方案是对属性使用数组名称值name（如上例）并在服务器端处理它（最好将name值保持为小写）。
或者，我们可以disable隐藏input以防止其值被发送到服务器：
$('input:hidden').prop("disabled", true);
在纯 CSS 解决方案中使用 JavaScript ？也许......也许不是......但现在现代世界中没有一个网站是空的 JavaScript。如果它有助于摆脱这个问题，那么把手弄脏一点也没关系！
if ($(window).width() < 400 ) {
$("input[type='email']").attr("placeholder","join our newsletter");
}
else { $("input[type='email']").attr("placeholder","your email");}
演示：http: //jsfiddle.net/fcrX5/
虽然有点 hacky，但如果您只需要显示/隐藏文本而不是更改文本，则可以在纯 HTML/CSS（不需要 javascript）中完成，而无需在 DOM 中复制元素。
hack 是根据宽度（或您的媒体查询是什么）简单地设置占位符文本的不同样式，并更改不透明度以使其出现或消失，如下所示：
input.responsive::-webkit-input-placeholder,
input.responsive::-moz-placeholder,
input.responsive:-moz-placeholder,
input.responsive:-ms-input-placeholder {
color: rgba(25, 25, 25, 1.0);
}
@media (max-width: 399px) {
input.responsive::-webkit-input-placeholder,
input.responsive::-moz-placeholder,
input.responsive:-moz-placeholder,
input.responsive:-ms-input-placeholder {
color: rgba(0, 0, 0, 0);
}
}
此脚本包括占位符的初始设置和更改窗口大小时的文本：
//set responsive mobile input field placeholder text
if ($(window).width() < 769) {
$("input").attr("placeholder", "Short text");
}
else {
$("input").attr("placeholder", "Long text for wide input filed");
}
$(window).resize(function () {
if ($(window).width() < 769) {
$("input").attr("placeholder", "Short text");
}
else {
$("input").attr("placeholder", "Long text for wide input field");
}
});
只需检查屏幕尺寸，并采取相应措施：
$(function() {
var txt = screen.width < 400 ? 'Join our newsletter' : 'Your email';
$('#mce-EMAIL').attr('placeholder', txt);
});
请注意，您明确要求“屏幕大小”、窗口大小和调整大小事件完全是另外一回事。
如果你使用 angular 和 lodash，你可以使用我为我在设计师坚持的一个项目中使用而编写的这个指令......
lodash 仅用于节省我们为 window.resize 事件编写 debouncer 函数的时间，可以在 5 分钟的样板 setTimeout 中替换...
angular.module('yourModuleNameHere').directive('mediaPlaceholder', function ($window, $parse) {
return {
restrict: 'A',
link: function ($scope, $elem, $attrs) {
var defObj = $parse($attrs.mediaPlaceholder)($scope);
function setPlaceholder() {
var lastFitting, windowWidth = $($window).width();
angular.forEach(defObj, function (placeholderValue,widthSetting) {
if (parseInt(widthSetting) <= windowWidth) {
lastFitting = placeholderValue;
}
});
$elem.attr('placeholder', lastFitting);
}
setPlaceholder();
$($window).resize(_.debounce(setPlaceholder, 40));
}
};
})
像这样使用：
<input type="search" media-placeholder="{0:'search',989:'long search placeholder'}">
基于上面@hashem 的出色回答，这是一种引导方法。
使用Bootstrap 4.5，标准的 @media 查询断点位于：
请参阅：https ://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints
假设您想在 xs 屏幕尺寸的输入控件上方使用文本，并为 sm 屏幕尺寸及以上使用占位符，以下是使用 Bootstrap 执行此操作的方法：
<div class="d-flex">
...
<!-- size xs: use text above input. -->
<div class="d-block d-sm-none mx-auto my-0 text-center">
LABEL TEXT
<div class="d-flex flex-row">
<input id="input-narrow" class="mx-auto my-0 p-1 text-center">
</div>
</div>
<!-- size sm and up: use placeholder -->
<div class="d-none d-sm-flex flex-row flex-nowrap mx-auto my-0">
<input id="input-wide" class="mx-auto my-0 p-1 text-center" placeholder="LABEL TEXT">
</div>
...
</div>