当我从px转换为rem单位时，应该如何确定要赋予宽度的rem <input>

Question

I have the following:

<input maxlength="4" style="width: 50px;" type="text" data-ng-model="pidUpper" />

I would like my input box to hold a maximum of 4 characters. Is there some formula that I should use when deciding on the width if I am using rem units?

Answer 1

Unless you use a monospace font you can't really know how wide it should be.

here's a good font stack for monospaced fonts from CSS tricks

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

also you can always tell the length of a string in Javascript if your just looking for validation. with "string".length

As for the rems , Here's a great article that explains the differences between em, px, and rem. http://snook.ca/archives/html_and_css/font-size-with-rem

CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to sleep yet, then let's look at how rem works. here's a quote

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

Answer 2

REM is based on the root HTML, which arguably most of the time is 16 as a base. If you want 4 max REM characters in a given selection, you would just do your base amount multiplied by the max number. 16 * 4 = 64

Answer 3

You cannot convert from px to rem units any more than you can convert from bananas to apples. That is, you can only convert if you postulate some specific relationship, like rem being 16px or one banana corresponding to two apples in some particular situation, and then the conversion is trivial. And if you assume a fixed relationship, then it's rather pointless to use rem .

It is generally impossible to make an element exactly 4 characters wide, since in most fonts, the widths of characters vary (possibly a lot, eg “i” vs. “W” in a typical font). To make its width the average width of 4 characters, the best attempt is to use just the HTML attribute

size=4

The size attribute of the input element sets the width in “average” characters. Implementations vary and are not particularly good in this issue.

For much more consistent rendering, you can additionally set the font to monospace, eg with font-family: Consolas, monospace . This makes the concept of average-width character well-defined, of course, and browsers have an easier task. They might make the field a few pixels too wide, but this should be tolerable. On some very old browsers, the field could be too narrow, but this is difficult to fix without causing other problems. If the input is code of some kind, like a PID, then a monospace font would probably be just fine.

In the first version of this answer, I suggested the use of the ch unit in CSS. I will retain the essential part, as it may be relevant in some contexts where the browsers used are known. But IE 10 seems to have a horrendously buggy implementation of ch (its value is far too small).

From the first version of the answer:

You can use the attributes

size=4 style="width: 2.4em; width: 4ch"

The ch unit in CSS denotes the width of the digit zero (0), but it is a fairly good approximation of “average” character width. Since not all browsers support this unit, I have included a fallback using the em unit. It is just a rough guess, based on some experience and experiments, that 2.4em is typically about 4 average characters wide. (The fallback must precede the modern setting, so that the fallback will not override the setting you really want to use.)

If the expected input is eg uppercase letters, you may need to consider some tuning here, possibly according to the characteristics of the font that you primarily suggest for the input element.