更改占位符文本的大小以适应移动设备 [英] change the size of placeholder text to fit when on mobile

问题描述

我有几个这样的输入:

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

我使用的是最新的引导程序版本，但正如您可能想象的那样，占位符文本太大而无法在移动帮助中垂直显示.有没有办法让它变小?

I am using the latest bootstrap version, but as you can probably imagine, the placeholder text is too big to display when on a mobile help vertically. Is there any way of making it smaller?

谢谢

推荐答案

你可以这样试试 CSS:

You could try CSS like this:

/* 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 编写为移动优先，就像上面所做的那样，因为它在资源更有限的移动设备上会更快.

So that when you have a screen smaller than 500px it will show the smaller 0.5em font, and when you have a larger screen it will show the larger 1em font. You should write your CSS to be mobile first as is being done above because it will be faster on mobile devices, where resources are more limited.

尽管现在我想起来了...如果您使用的是 em，它应该会缩放到显示屏.您的字体大小使用 px 吗?

Although now that I think about it... If you're using em, it should scale to the display screen. Are you using px for your font sizes?

这篇关于更改占位符文本的大小以适应移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！