CSSでemを開く正しい方法の詳細な説明

「通常 1em=16px」と言うのはなぜですか?

ユーザーのブラウザによってレンダリングされるデフォルトのテキストサイズは「16 ピクセル」です。つまり、Web ページの「body」とその子要素のデフォルトのテキストサイズは、ユーザーのブラウザでは「16 ピクセル」です。
私たちは皆これを知っています: em (およびrem ) は相対的な単位です! 「相対的」とは、次のことを意味します。

相対計算には参照が必要なので、ここでの相対は親要素のfont-sizeを参照します。たとえば、div でフォントサイズを「16px」に設定した場合、この div の子孫要素は、子孫要素で明示的に再度設定しない限り、そのフォントサイズを継承します。ユーザーがブラウザの UI コントロールを使用してテキストサイズを変更すると、ページ全体も拡大 (または縮小) されるため、ユーザーがブラウザのフォントを変更してもページ全体がクラッシュすることはありません。

em は親要素に対して相対的であるのに対し、rem は「ルート」要素 (html) に対して相対的であるというだけです。

それは一体何ですか？

em: 相対単位。基本値は現在の要素のフォントサイズです。実際の値は (継承された) 親要素によって異なります。
著者がデータと継続的なテストを調べた後、「気づかれなかった」式が見つかりました。
ターゲット em 値 = ターゲットピクセル値 / 親要素のピクセル値

（↑：emと親要素font-sizeの関係

<本文>
	私は<p>yunxiaomeng</p>です。
</本文>

体{
	フォントサイズ: 16px;
}
p{
	フォントサイズ: 1.2em;
}

テスト1

写真の赤い枠が見えますか？ pタグの実際のレンダリングサイズ（ターゲットピクセル値）は、16（px）×1.2 = 19.2（px）です。

ここで注意すべき重要な点が 1 つあります。同じ要素の別のセレクター/属性が、以前の値を上書きするために異なる font-size 値を使用する場合、このドメインの em の基本値が変更されます。
たとえば、上記の p に別の属性を追加します。

p{
	フォントサイズ: 1.2em;
	パディング: 1.2em;
}

すると、実際にレンダリングされたパディングの値（ターゲットピクセル値）は 19.2(px) x 1.2 = 23.04(px)（つまり 16 x 1.2 x 1.2）になります。

テスト2

このため、子要素の各レイヤーに em を設定すると、実際のサイズが希望どおりにならない場合があります。
(フォントと同じ値のマージンが存在する理由については、Zhang Xinxu の「CSS World」に記載されている「ゴースト空白要素」を参照してください。)

レムも同じでしょうか？！

rem も相対的な単位であり、ルート要素を基準にして変化します。
em とほぼ同じ方法で計算されます。しかし、ここでは「よくある誤解」があります。一般的に、レスポンシブな適応を行うために、ルート要素のfont-size値をページ幅に合わせて動的に変更することができます。

htmlWidth を document.documentElement.clientWidth || document.body.clientWidth とします。
htmlDom = document.getElementsByTagName('html')[0] とします。
	
window.onresize = 関数 () {
    htmlDom.style.fontSize=htmlWidth/20+'px';
};

しかし、多くの人は、rem 値が「ページサイズ」に対応すると誤解しています。実はこれは間違っています！

そして今では、CSS を通じてレスポンシブにすることが完全に可能になりました。
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); }メディアクエリ@media付き

CSS で em を開く正しい方法についての記事はこれで終わりです。CSS で em を開く方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: njs モジュールを使用して nginx 構成に js スクリプトを導入する

>>: サーバーから返される14の一般的なHTTPステータスコードの詳細な説明