Wie kann man die relative 'em'-Skala in CSS einstellen?

Question

seit em Längenskala ist relativ zur aktuellen Schriftgröße, dieses Problem aufgetreten.

Ich möchte die border-width vieler Elemente ein Achtel meiner normalen Schriftbreite sein. Mit normal meine ich, wenn das HTML-Dokument die wenigsten notwendigen Teile hat und nur ein Text in meiner Schrift geschrieben ist. Meine Schriftart ist Mono.

Sie können sehen, wie es aussieht:

Wenn ich border-width: 0.125em; nur schreiben, werden Grenzen haben die gleiche Breite nicht.

Ich möchte nicht px verwenden, weil ich die gleiche Breite auf sehr kompakten Displays produzieren möchte.

Was soll ich tun?

Answer 1

Sie können calc(1rem/8) verwenden, um 1/8 von 1rem zu erhalten oder 0.125rem zu verwenden. Wenn Sie rem verwenden, wird auf die grundlegende Schriftgröße des Dokuments Bezug genommen, und nicht auf em im gesamten Dokument.

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

<div>foo</div>