css 'ex'ユニットの値は何ですか？

Question

（Xunitと混同しないように、人気の.NETユニットテストライブラリ。）

今日は退屈のフィット感で私はGmailのDOMを（はい、私は非常に退屈していた）の検査を開始しました。

私は特定の要素の幅に関する興味深い仕様に気付くまで、すべてがかなり簡単に見えました。有名なグーグル寺院では、希少な「ex」ユニットを使用して多数のテーブルコラムを指定していました。

width: 22ex; 

は私が困惑して最初に（「？何EX」をだ」）、それは私に戻ってきた：私はCSSについて学んでいたとき、最初に、私は数年前から何かを覚えているようです。 From the CSS3 spec：

[EXユニットである] first available fontの使用X-高さに等しいです。 xの高さは、小文字の「x」の高さに等しいことが多いため、そのように呼ばれます。しかし、 "ex"は "x"を含まないフォントでも定義されます。

しかし、私は実際にはそれが以前に使用されて見たことはありません私は非常に一般的なemを使用し、その価値を感謝しますが、なぜ "元"ですか？これはemよりもはるかに標準的ではなく、はるかに役に立たないようです。

このトピックについて議論した数少ないページの1つは、Stephen Poleyのhttp://www.xs4all.nl/~sbpoley/webmatters/emex.htmlです。スティーブンスは良い点を挙げていますが、彼の議論は私にとって決して確定的ではないようです。

私の質問は：'ex'ユニットはどのような価値をWebデザインに貸し出していますか？

（この質問は主観的なタグを付けることができますが、私は自分自身よりも多くの経験を積んSO'ersにその決定を残しておきます。）

Answer 1

あなたの高さとの関係でサイズのものにしたいときに便利ですテキストの小文字。例えば、そのような設計に取り組んで想像：

をデザインのタイポグラフィの次元では、文字の高さは、残りの要素に重要な空間的な関係を持っています。上のソースイメージ内の行は、テキストのx高さを示すのに役立ちますが、そのテキストの周囲にデザインする場合のガイドラインも示しています。

コメント内でJonathanが指摘したように、exは単純にem（width）の高さバージョンです。

Answer 2

CSS仕様のの値はです。実際に求めているのであれば、em単位の値とまったく同じです。

フォントをの相対サイズに設定することができます。

私の基本フォントのサイズがわかりません。だからWebデザインのための良い戦略の1つは、絶対ではなく相対的なフォントサイズを設定することです。 「10ピクセル」のような固定サイズではなく、「通常サイズの2倍」または「通常サイズより少し小さい」に相当します。

Answer 3

ここで考慮するもう1つの点は、ユーザーがフォントサイズをアップまたはダウンするとき（おそらくCtrl +マウスホイール（ウィンドウ）を使用して）のページの拡大率です。

私は次の文字を使用しています。 パディング左：2 em; パディング右：2 em;

および 埋め込みボトム：2 ex; パディングトップ：2 ex;

したがって、垂直方向のスケーリングプロパティには垂直方向の単位を使用し、水平方向のスケーリングプロパティには水平方向の測定単位を使用します。

Answer 4

「単一/二重線間隔」のような用語は、実際には、emで測定される2つの隣接線間のオフセットを意味することに注意してください。したがって、「二重線間隔」は、各線の高さが2 emであることを意味します。

したがって、「線」に比例する垂直距離を指定する場合は、emを使用します。小文字の実際の高さが必要な場合にのみ、exを使用します。これは、あまり意味のない例です。

Answer 5

質問に答えるには、上付き文字と下付き文字を使用します。例：

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