0

我有以下内容：

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

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

4

3 回答 3

0

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

这是来自CSS 技巧的等宽字体的一个很好的字体堆栈

/* 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 引入了一些新的单位，包括代表“根 em”的 rem 单位。如果这还没有让你入睡，那么让我们看看 rem 是如何工作的。这是一个报价

em 单位与父级的字体大小相关，这会导致复合问题。rem 单位是相对于根元素或 html 元素的。这意味着我们可以在 html 元素上定义单个字体大小，并将所有 rem 单位定义为其百分比。

于 2013-10-18T14:17:31.433 回答
0

REM 基于根 HTML，可以说大部分时间都是 16 作为基础。如果您希望在给定选择中最多包含 4 个 REM 字符，您只需将基本数量乘以最大数量即可。16 * 4 = 64

于 2013-10-18T14:18:44.003 回答
0

你不能从转换px为rem单位，就像你不能从香蕉转换为苹果一样。也就是说，只有在假设某种特定关系时才能转换，例如在某种特定情况下，rem存在16px或一根香蕉对应于两个苹果，然后转换是微不足道的。如果你假设一个固定的关系，那么使用rem.

通常不可能使元素的宽度正好为 4 个字符，因为在大多数字体中，字符的宽度变化很大（可能很多，例如典型字体中的“i”与“W”）。要使其宽度为 4 个字符的平均宽度，最好的尝试是仅使用 HTML 属性

size=4

元素的size属性设置“平均”字符的宽度。实现方式各不相同，在这个问题上并不是特别好。input

要获得更一致的渲染，您还可以将字体设置为等宽，例如使用font-family: Consolas, monospace. 这使得平均宽度字符的概念得到了很好的定义，当然，浏览器的任务也更容易了。他们可能会使字段太宽几个像素，但这应该是可以容忍的。在一些非常旧的浏览器上，该字段可能太窄，但这很难在不引起其他问题的情况下修复。如果输入是某种代码，比如 PID，那么等宽字体可能就可以了。

在这个答案的第一个版本中，我建议ch在 CSS 中使用单位。我将保留基本部分，因为它可能在某些已知使用的浏览器的情况下是相关的。但是 IE 10 似乎有一个可怕的错误实现ch（它的价值太小了）。

从答案的第一个版本：

您可以使用属性

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

CSS 中的ch单位表示数字零 (0) 的宽度，但它是“平均”字符宽度的相当好的近似值。由于不是所有的浏览器都支持这个单元，我已经包含了一个使用这个em单元的后备。根据一些经验和实验，这只是一个粗略的猜测，2.4em通常约为 4 个平均字符宽。（后备必须在现代设置之前，以便后备不会覆盖您真正想要使用的设置。）

如果预期的输入是大写字母，您可能需要在此处考虑一些调整，可能根据您主要为input元素建议的字体特征。

于 2013-10-18T18:15:01.093 回答