我們應該如何保持字體放大和縮小，但不使其對上下文敏感？

Question

深入到項目中，我們在使用字體大小時遇到​​問題。 我們有幾個標記模塊，我們在不同的環境下重複使用。 恆定的頭部疼痛與計算的字體大小在不同的上下文中是不同的。 當我們使用響應式設計時，使用em對我們很重要。所以字體大小的可伸縮性是必須的。請參閱jsFiddle一個簡單的例子。 我們如何保持字體放大和縮小，但使其不是上下文敏感？

Answer 1

繼承可能很煩人，尤其是在使用ems時。正如你知道上下文感謝班級名稱，你應該能夠通過應用一些簡單的數學來克服這個問題。

讓我們一切.context1的理想，你的CSS目前的樣子：

.context1 { 
    font-size: 1em; 
} 
.context2 { 
    font-size: 1.5em; 
} 
.my-font-size { 
    font-size: 3em; 
} 

在你的情況下，第一個標題會3em，第二個實際上是4.5em因爲父被定義爲大1.5倍。爲了解決這個問題，你可以做到以下幾點：

.context1 { 
    font-size: 1em; //default font size for .context1 
} 
.context2 { 
    font-size: 1.5em; //default font size for .context2 
} 
.my-font-size { 
    font-size: 3em; //default font size for .my-font-size 
} 
.context2 .my-font-size { 
    font-size: 2em; //adjust the font size for the parent's value (3/1.5) 
} 

同樣，你可以定義它，以便.context2是常態：

.context1 .my-font-size { 
    font-size: 4.5em; //(3 * 1.5) 
} 

Here's the updated the example。

Answer 2

這聽起來像你正在尋找rem單位。

http://jsfiddle.net/6YC89/1/

.context1 { 
    font-size: 1em; 
} 
.context2 { 
    font-size: 1.5em; 
} 
.my-font-size { 
    font-size: 3rem; 
} 

瀏覽器支持是相當不錯的（見：http://caniuse.com/#feat=rem）。唯一不支持它的主要瀏覽器是IE8。