Html 当我从px单位转换为rem单位时，我应该如何决定一个<；输入>；

我有以下资料：

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

---

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

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

这里有一个很好的字体堆栈，用于从

此外，如果您只是在寻找验证，您也可以在Javascript中随时知道字符串的长度。带

“string”。长度

至于rems，这里有一篇很好的文章解释了em、px和rem之间的区别

CSS3引入了一些新装置，包括rem装置，其
对于“根em”。如果这还没有让你入睡，那么让我们看看
rem是如何工作的。这里有一句话

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

REM是基于根HTML的，可以说大部分时间是以16为基础的。如果您希望在给定的选择中包含4个最大REM字符，则只需将基本数量乘以最大数量即可
16*4=64
你不能从
px
转换成
rem
单位，就像你不能从香蕉转换成苹果一样。也就是说，只有假设某些特定关系，例如
rem
为
16px
或在某些特定情况下一根香蕉对应两个苹果，才能进行转换，然后转换是微不足道的。如果你假设一个固定的关系，那么使用
rem
是毫无意义的

通常不可能将一个元素精确设置为4个字符宽，因为在大多数字体中，字符的宽度都是不同的（可能很多，例如典型字体中的“i”和“W”）。要使其宽度为4个字符的平均宽度，最好的尝试是仅使用HTML属性

size=4

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

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

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

从答案的第一个版本：

您可以使用属性

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

CSS中的表示数字零（0）的宽度，但它相当接近“平均”字符宽度。由于并非所有浏览器都支持此单元，因此我使用
em
单元提供了一个后备功能。根据一些经验和实验，这只是一个粗略的猜测，
2.4em
通常大约有4个平均字符宽。（回退必须先于现代设置，以便回退不会覆盖您真正想要使用的设置。）

如果输入的输入是大写字母，你可能需要考虑这里的一些调整，可能是根据你最初建议的字体的特性，对于“代码>输入< /代码>元素.< /P>，除非你使用的是单字体，无法预测四个字母字符串的大小，因为它们具有可变的字符/字形宽度。1rem=在正文上设置的基本字体大小（浏览器默认值为16px）。因为你的宽度是50像素。您的输入大约为3rem（50/16=3.125）。您的输入不会或多或少地影响到这一点吗？
浏览器默认设置通常为16px的默认字体大小，这是不可靠的。rem在这个特定的例子中是不相关的，因为重要的是当前元素的字体大小（如果主体的字体大小为16px，而输入元素的大小大于或小于16px，那么rem无论如何都是错误的大小）。如果你指望
rem
是一个固定数量的像素（它不是），使用
rem
有一点意义。注意，我说的是“基本”金额，不是固定的。我知道这不是一个固定的像素数，我只是简单地说明了一个可能的基本解决方案。这并不能回答问题。
size=4 style="width: 2.4em; width: 4ch"