cssの `em`スケールの相対性を修正する方法は？

Question

emの長さスケールは現在のフォントサイズに比例しているため、この問題が発生しました。

多くの要素のborder-widthを私の通常のフォント幅の8分の1にします。通常、私は、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>