[解決済み] なぜpxでなくemなのか？

質問

スタイルシートでサイズや距離を定義するには em ピクセル単位ではなく そこで質問ですが、なぜ em ではなく px CSSでスタイルを定義するときに？これを説明する良い例はありますか？

どのように解決するのですか？

この質問をした理由は、CSSを楽しくハックしているうちに、emの使い方を忘れてしまったからです。私はフォントのサイズ調整そのものについて話していなかったので、私が質問を一般的なものにしていたことに人々は気づいていませんでした。私はむしろ、スタイルを 任意のブロック要素 をページ上に表示します。

として ヘンリック・ポール や他の人が指摘したように、emは要素で使用されているフォントサイズに比例します。 ブロック要素のサイズをpxで定義するのはよくあることですが、ブラウザでフォントのサイズを変更すると、たいていこの設計が崩れてしまいます。フォントのサイズ変更は、一般に、ショートカットキーの Ctrl + + または Ctrl + - . そのため、代わりにemを使用するのが良い方法です。

pxを使用して幅を定義する

以下に、その例を示します。例えば、divタグをスタイリッシュな日付ボックスにしたい場合、以下のようなHTMLコードが考えられます。

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

簡単な実装では date-box クラスを px 単位で指定します。

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

問題点

しかし、ブラウザで文字のサイズを大きくしようとすると、デザインが崩れてしまいます。また、テキストはボックスの外側にはみ出しますが、これはSOのデザインで起こることとほぼ同じです。 フローディン が指摘する。にロックされているため、ボックスの幅は同じ大きさのままだからです。 50px .

代わりにemを使用する

よりスマートな方法は、代わりにemsで幅を定義することです。

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

つまり、date-boxに定義されたfont-sizeに比例して、テキストと一緒にボックスもサイズアップするのです。この例では、フォントサイズは次の場所で定義されています。 * を10ptとすると、そのフォントサイズの2.5倍の大きさになります。そのため、ブラウザでフォントのサイズを調整する場合、ボックスはそのフォントサイズの2.5倍の大きさになります。