web-dev-qa-db-ja.com

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

（人気のある.Net単体テストライブラリである Xunit と混同しないでください。）

今日私は退屈のはめ込みでGmail DOMの検査を始めました（そう、私はとても退屈でした）。

特定の要素の幅に関する興味深い仕様に気付くまで、すべてがかなり簡単に見えました。著名なグーグライトは、珍しい「元」ユニットを使用して多くのテーブル列を指定していました。

width: 22ex;

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

[ex unitis] 最初に使用可能なフォント の使用されたx-heightに等しい。 xの高さは、小文字の「x」の高さに等しいことが多いため、そう呼ばれています。ただし、「x」を含まないフォントでも「ex」が定義されています。

まあ、良い。しかし、実際にそれが使用されるのを見たことはありません（自分で使用することはほとんどありません）。私は非常に一般的にemsを使用しており、その価値を高く評価していますが、なぜ「ex」なのですか？ emよりも標準的な測定ではないようで、あまり役に立たないようです。

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

だから私の質問は：「ex」ユニットはWebデザインにどのような価値をもたらしますか？

（この質問には主観的なタグを付けることができますが、その決定は私よりも経験豊富なSOに任せます。）

cssspecificationsunits-of-measurement
83
Joel

テキストの小文字の高さを基準にしてサイズを変更する場合に便利です。たとえば、次のような設計に取り組んでいるとします。

alt text


デザインの活版印刷の次元では、文字の高さは残りの要素との重要な空間関係を持っています。上記のソース画像の線は、テキストのxの高さを示すのに役立ちますが、そのテキストの周りにデザインする場合のガイドラインの場所も示しています。

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

115
Rex M

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

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

ここで考慮すべきもう1つの点は、ユーザーがフォントサイズを拡大または縮小したときのページのスケーリングです（おそらく、Ctrl +マウスホイール（Windows）を使用）。

私は.. padding-left：2 emを使っています。 padding-right：2 em;

そしてexとpadding-bottom：2 ex;パディングトップ：2 ex;

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

2
Derrick

CSS仕様でそれを持っているの値は、あなたが本当に求めているものである場合、emユニットを持っていることの値とまったく同じです。

フォントをrelativeサイズに設定できます。

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

0
AmbroseChapel

「1行または2行の行間」などの用語は、実際にはemで測定される2つの隣接する行間のオフセットを意味します。したがって、「2行間隔」とは、各行の高さが2 emであることを意味します。

したがって、「行」に比例する垂直距離を指定する場合は、emを使用します。小文字の実際の高さが必要な場合にのみexを使用してください。

0
Yì Yáng