em-calc和rem-calc之間的區別

到目前爲止，我在Zurb基金會項目中一直使用em-calc作爲CSS大小定義。不過，最近我注意到開發者越來越多地使用rem-calc。em-calc和rem-calc之間的區別

我知道每個功能是幹什麼的，但我不明白什麼時候應該使用em-calc或rem-calc。

這兩個函數有什麼區別？

2015-04-17 Aljaz

看起來他們基本上是試圖做的，他們用'em'單位也做了同樣的事情，但與'rem'，而不是現在。看看爲什麼你可能想在'EM'上使用'REM'，也許這將有助於澄清事情。 https://j.eremy.net/confused-about-rem-and-em/ –

那麼其實你的問題是某種How does rem differ from em in CSS?（和Practical difference between rem and em units）重複的等

em-calc()返回像素您輸入的EM值，而 rem-calc()回報REM單位。在實踐中，這意味着當您使用rem-calc()設置選擇器的字體大小時，字體大小與html屬性的字體大小相關，而不是其直接父級。

你可以看到在下面的例子中diffence：在顯示

HTML

<body> 
<section> section text 
    <small>small text</small> 
</section> 

<section class="rem"> section .rem text 
    <small>small text</small> 
</section> 
</body>

SCCS

section { 
font-size: em-calc(24); 
small { font-size: em-calc(12); } 
} 

section.rem { 
font-size: rem-calc(24); 
small { font-size: rem-calc(12); } 
}

上面的結果看起來像圖片如下：

enter image description here

現在改變section標籤的字體大小：

section { 
font-size: em-calc(48); 
small { font-size: em-calc(12); } 
} 

section.rem { 
font-size: rem-calc(48); 
small { font-size: rem-calc(12); } 
}

注意，因爲這兩個section標籤是body的直接父母使用rem-calc(48)或rem-calc(48)在section的字體大小上面的這個例子不會有什麼不同。現在

結果就會像下面這樣： enter image description here

正如你所看到的，字體大小小不與其父規模。

就我個人而言，我認爲您應該使用rem-calc()作爲頁面的主要結構元素（頁眉，頁腳，內容，導航等），並且嵌套在前面的主要元素中的元素使用em-calc()。

所以對於例如用在這裏：

section { 
font-size: rem-calc(20); 
small { font-size: em-calc(10); } 
}

來源

2015-05-02 14:08:28

em-calc和rem-calc之間的區別

回答

相關問題