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;
} 

写真の赤い枠が見えますか？ 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）になります。

このため、子要素の各レイヤーに 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 をよろしくお願いいたします。