Css 更改占位符文本的大小以适应移动设备

我有几个类似的输入：

<input id="company_name" type="text" class="form-control" name="company_name" value="" placeholder="COMPANY OR TRADING NAME"></div>

/* For mobile phones: */
.your-font-class {
    font-size: 0.5 em
}

@media only screen and (min-width: 500px) {
    /* For desktop: */
    .your-font-class {
        font-size: 1em
    }
}

我使用的是最新的引导版本，但正如您可能想象的那样，占位符文本太大，在移动帮助中无法显示。有没有办法把它缩小

---

谢谢，您可以在媒体查询中更改输入字段的字体大小。

您可以尝试如下CSS：

<input id="company_name" type="text" class="form-control" name="company_name" value="" placeholder="COMPANY OR TRADING NAME"></div>

/* For mobile phones: */
.your-font-class {
    font-size: 0.5 em
}

@media only screen and (min-width: 500px) {
    /* For desktop: */
    .your-font-class {
        font-size: 1em
    }
}

因此，当屏幕小于500px时，它将显示较小的0.5em字体，当屏幕较大时，它将显示较大的1em字体。您应该像上面所做的那样，首先将CSS编写为移动的，因为在资源更有限的移动设备上，它会更快

---

虽然现在我想起来了。。。如果您使用的是em，它应该可以缩放到显示屏幕。您是否使用px来计算字体大小？

工作代码段？虽然这可能是解决问题的一个有价值的提示，但一个好的答案也说明了解决方案。请提供示例代码来说明您的意思。或者，考虑将此写入评论。