如何在css中修复`em`比例的相对性？

Question

由于em长度比例相对于当前字体大小，因此出现了这个问题。

我希望许多元素的border-width是我普通字体宽度的八分之一。通常我的意思是当html文档具有最不必要的部分并且只是用我的字体写的文本。我的字体是单声道。

你可以看到它的外观：

当我写border-width: 0.125em;时，边框的宽度不同。

我不想使用px，因为我想在非常紧凑的显示器上生成相同的宽度。

我该怎么办？

Answer 1

您可以使用calc(1rem / 8)获取1rem的1/8或使用0.125rem。使用rem将引用文档的基本字体大小，而不是整个文档中的em。

div {
  font-family: monospace;
  border: 0.125rem solid black;
}

<div>foo</div>