CSS - EM值不一致，如何調試/解釋

所以我有一個問題，一致的「em」值的大小，我似乎無法弄清楚爲什麼。CSS - EM值不一致，如何調試/解釋

我正在爲我的網站使用SCSS並將我所有的SCSS文件預處理爲單個CSS文件。

讓我來說明我的結構是如何設置的。

/* 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>

這又顯示了結果，我希望，這是對雙方的div標籤2px的邊框。我能夠以完全相同的方式在我的網站上覆制此內容。

我的問題是，在我的一些小部件，也有在那裏我得到了3px的邊框，而不是2px的實例。

我讀過，我的邊框寬度可以與另一個屬性值級聯，但對我的生活不能弄清楚在何處或使用它的原因。當我查看瀏覽器中的開發人員工具時，我發現所有border-width的實例都是0.15em。

如果無法確定解釋/調試，我可以提供一個現場直播例子，並期望將直播網站上（僅供參考本文的未來觀衆）糾正。

來源

2016-06-10 Josh Balsillie

因此，我們知道你的問題，你有什麼問題嗎？ –

'ems'是相對於字體大小的，無論你在所有邊框中是否有'0.15em'，如果你改變任何元素的字體大小，那麼'0.15em'將不會是'2px'， – blonfu

blonfu ，我認爲這可能是我的問題。你能否詳細說明ems如何改變？例如，我做了一個測試，以驗證您在說我的「h1」字體是3em。我注意到一個更大的邊界，當0.15em邊界被應用於它時，你是說它是3em的0.15 ...即0.45em邊界？ –

since095提供使用REM，而不是EM答案。 rem總是使用<html>標記的根目錄默認字體大小（您可以覆蓋），相反，em使用當前標記字體大小並相應地調整其他em值（適用於繼承）。

這兩者都有優點和缺點，它的真正歸結爲你打算如何構建你的網站。繼承可以非常快速地變得雜亂和複雜，但是如果正確使用可以非常強大。通過統一的測量來控制您的網站的每個方面可以幫助精簡和簡化，但不具有繼承的功能。

我遇到那些建議兩者的組合，使用REM設置常量，如字體大小，邊框和EM的間距，例如邊距和填充。

下面是使用rem和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>

來源

2016-06-11 16:22:15

CSS - EM值不一致，如何調試/解釋

回答

相關問題