change the size of placeholder text to fit when on mobile

问题

I have several inputs like this:

<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?

Thanks

回答1:

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
    }
}

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.

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?

回答2:

You can change the font size for the input field in a media query.

来源：https://stackoverflow.com/questions/45189240/change-the-size-of-placeholder-text-to-fit-when-on-mobile