html - 当我从 px 转换为 rem 单位时，我应该如何决定给 <input> 的宽度多少 rems

Question

我有以下内容:

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

我希望我的输入框最多包含 4 个字符。如果我使用 rem 单位，在确定宽度时是否应该使用一些公式？

Answer 1

除非您使用等宽字体，否则您无法真正知道它应该有多宽。

这是来自 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;

如果您只是在寻找验证，您也可以随时告诉 Javascript 中字符串的长度。使用 "string".length

至于 rems，这里有一篇很棒的文章解释了 em、px 和 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.