CSS - Inkonsistente EM-Werte, Debuggen/Erläuterung

Also habe ich ein Problem mit der konsistenten Dimensionierung von "em" -Werten und ich kann nicht herausfinden, warum.CSS - Inkonsistente EM-Werte, Debuggen/Erläuterung

Ich verwende SCSS für meine Site und Vorverarbeitung aller meiner SCSS-Dateien in einer einzigen CSS-Datei.

Lassen Sie mich veranschaulichen, wie meine Struktur eingerichtet ist.

/* Value used for border width 
 
$defaultBorderWidth: $sizeSmallest; */ 
 

 
.test { 
 
\t width: 5em; 
 
\t height: 5em; 
 
\t 
 
\t border-style: solid; 
 
\t border-width: 0.15em; /* normally $defaultBorderWidth */ 
 
} 
 
.test div { 
 
\t width: 1em; 
 
\t height: 1em; 
 
\t 
 
\t border-style: solid; 
 
\t border-width: 0.15em; /* normally $defaultBorderWidth */ 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0"> 
 
</head> 
 
<body> 
 
    <div class="test"> 
 
    <div></div> 
 
    </div> 
 
</body> 
 
</html>

Dies wiederum zeigt das Ergebnis ich erwarte, die eine 2px Grenze auf beiden div-Tags ist. Ich bin in der Lage, dies auf meiner Website in genau der gleichen Weise zu replizieren.

Mein Problem ist, dass es in einigen meiner Widgets Instanzen gibt, wo ich einen 3px Rahmen statt 2px bekomme.

Ich habe gelesen, dass meine Grenze-Breite mit einem anderen Attribut Wert kaskadieren könnte, aber für das Leben von mir kann nicht herausfinden, wo oder warum es passiert. Wenn ich mir die Entwicklerwerkzeuge in meinen Browsern anschaue, sehe ich, dass alle Instanzen der Grenzbreite 0,15 em sind.

Wenn eine Erklärung/Fehlersuche nicht bestimmt werden kann, kann ich ein Live-Site-Beispiel bereitstellen, mit der Erwartung, dass es auf der Live-Site korrigiert wird (für zukünftige Zuschauer dieses Artikels).

Quelle

2016-06-10 Josh Balsillie

So wissen wir, Ihre Frage, was ist Ihre Frage? –

'ems' sind relativ zur Schriftgröße, egal, Sie haben eine' 0.15em' in allen Rahmen, wenn Sie die Schriftgröße eines Elements ändern, dann ist '0.15em' nicht mehr '2px', – blonfu

bonfu Ich denke, das könnte mein Problem sein. Können Sie näher erläutern, wie sich ems verändert? Zum Beispiel habe ich einen Test gemacht, um zu verifizieren, was du mit meiner "h1" -Schriftart gesagt hast, nämlich 3em. Ich bemerkte eine viel größere Grenze, wenn ein 0.15em Grenze an sie angewendet wird, also sagen Sie, es ist 0.15 von 3em ... d. H. 0.45em Grenze? –

since095 lieferte die Antwort zu rem anstelle von em zu verwenden. Wo rem immer die Standard-Standardschriftgröße des Tags <html> verwendet (die Sie überschreiben können), verwendet em dagegen die aktuelle Tag-Schriftgröße und passt andere em-Werte entsprechend an (gut für Vererbung).

Es gibt Vorteile und Nachteile von beiden, und es kommt wirklich darauf an, wie Sie Ihre Website strukturieren wollen. Vererbung kann sehr schnell unordentlich und kompliziert werden, aber wenn sie korrekt verwendet wird, kann sie sehr mächtig sein. Die Kontrolle aller Aspekte Ihrer Website mit einheitlichen Messungen kann helfen, zu rationalisieren und zu vereinfachen, trägt jedoch nicht die Macht der Vererbung.

Ich bin auf diejenigen gestoßen, die eine Kombination der beiden vorschlagen, Rem verwenden, um Konstanten wie Schriftgröße, Rahmen und Em für Abstände wie Ränder und Padding festzulegen.

Im Folgenden finden Sie ein Beispiel für die Verwendung von rem und em.

.testRem h1 { 
 
\t border-style: solid; 
 
\t 
 
\t font-size: 3rem; 
 
\t width: 15rem; 
 
\t height: 3rem; 
 
\t margin: 0.5rem; 
 
\t border-width: 0.5rem; 
 
} 
 
.testEm h1 { 
 
\t border-style: solid; 
 
\t 
 
\t font-size: 3em; 
 
\t width: 5em; 
 
\t height: 3em; 
 
\t margin: 0.5em; 
 
\t border-width: 0.5em; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div class="testRem"> 
 
    <h1>Test rem</h1> 
 
    <div class="testEm"> 
 
    <h1>Test em</h1> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2016-06-11 16:22:15

CSS - Inkonsistente EM-Werte, Debuggen/Erläuterung

Antwort

Verwandte Themen