css'ex'單元的值是多少？

Question

在無聊的適合我開始檢查Gmail的DOM（不要與Xunit，一個流行的.Net單元測試庫。混淆）

今天（是的，我很無聊）。

一切看起來都很直接，直到我注意到某些元素的寬度有趣的規範。傑出的Googlites使用罕見的「ex」單位指定了許多列表。

width: 22ex; 

起初我難住了（「？什麼是‘前’」），那麼它回來對我說：我好像以前記得從多年的東西時，我首先是學習CSS。 From the CSS3 spec：

[該前部是]等於first available font的用於x高度。 x高度是所謂的，因爲它通常等於小寫字母「x」的高度。但是，即使對於不包含「x」的字體，也定義了「ex」。

那麼好。但我從來沒有真正看到過它的使用（更不用說自己使用它）。我常用ems，並欣賞它們的價值，但爲什麼「ex」呢？它看起來不像標準測量那麼標準，而且也不太有用。

我發現討論此主題的幾頁中有一篇是Stephen Poley的http://www.xs4all.nl/~sbpoley/webmatters/emex.html。斯蒂芬提出了很好的觀點，然而，他的討論似乎並沒有結果。

所以我的問題是：'ex'單元對網頁設計有什麼價值？

（這個問題可被標記爲主觀的，但我會離開這個決定更有經驗SO'ers比我。）

Answer 1

當你想要的東西的大小有關的高度是非常有用的你文字的小寫字母。例如，假設在一個設計工作，像這樣：

在外觀設計上的印刷尺寸，字母的高度必須的元素，其餘重要的空間關係。上面的源圖像中的行旨在幫助指出文本的x高度，但它們還顯示圍繞該文本設計的指南的位置。

正如Jonathan在評論中指出的那樣，ex只是em（width）的高度版本。

Answer 2

的值在CSS規範中爲，如果這就是您真正要求的值，則與具有em單元的值完全相同。

它使您可以將字體設置爲相對大小。

你不知道我的基礎字體大小是多少。因此，網頁設計的一個好策略是設置相對而非絕對的字體大小;相當於「正常尺寸的兩倍」或「比正常尺寸稍小」，而不是像「十像素」那樣的固定尺寸。

Answer 3

這裏要考慮的另一件事是當用戶打開或關閉字體大小（可能使用Ctrl +鼠標滾輪（Windows））時，頁面的縮放比例。

我使用了em .. padding-left：2 em; padding-right：2 em;

and ex padding-bottom：2 ex; padding-top：2 ex;

因此，使用垂直縮放屬性的垂直測量單位和水平縮放屬性的水平測量單位。

Answer 4

請注意，「單行/雙行間距」等術語實際上是指兩條相鄰行之間的偏移量，由em測量。所以「雙線間距」意味着每條線的高度爲2 em。

因此，如果要指定與「線條」成比例的垂直距離，請使用em。如果你想要小寫字母的實際高度，也就是我敢說，這是一個非常罕見的例子，那麼只能用ex。

Answer 5

要回答這個問題，一個用於上標和下標。例如：

sup { 
    font-size: 75%; 
    height: 0; 
    line-height: 0; 
    position: relative; 
    vertical-align: baseline; 
    bottom: 1ex; 
}