em & rem

5125 ワード

そうたいはんのうユニット

デフォルトでは、ブラウザがHTMLに割り当てるフォントサイズは16pxです.

なぜ使いますか。

フォントサイズをpxのみで表すと、コンテナのサイズが変化すると内容は変化しません.

また、ユーザーがブラウザでフォントサイズの設定を変更した場合、ユーザーはまったく反応しません.

現在フォント印刷で指定されているポイントサイズの単位を表します.

em単位を使用する親要素のfont-size属性値に基づいています.

<div class = "parent">
    Parent
    <div class="child">Child</div>
</div>

.parent{
    font-size : 8em; 
}

.child{
    font-size : 0.5em;
}

一番上の「デフォルトでは、ブラウザがHTMLに割り当てるフォントサイズは16pxです.」はい.

つまり、デフォルトでは、ユーザーがHTMLまたはbodyにフォントサイズを指定しない限り、16pxとして指定されます.

親要素の8 emは、HTMLの親要素HTMLの16px * 8 を計算する値です.(親は128 px)

親のchildは、親(parent=128 px)の0.5倍64pxである.

remのrはルートを表す.

トップレベル要素のfont-size属性値に基づいて、トップレベル要素はhtmlタグです.

<div class = "parent">
    Parent
    <div class="child">Child</div>
</div>

.parent{
    font-size : 8rem; 
}

.child{
    font-size : 0.5rem;
}

parentは、HTMLでデフォルトで指定されている16ピクセルの8倍128pxであるルート要素です.

childはルート要素であり、8pxHTMLでデフォルトで指定された16画素に0.5倍を乗じたものを計算します.

em親要素の相対的なサイズを決定します.

remルート要素の相対的なサイズを決定します.

この問題について(em & rem), 我々は、より多くの情報をここで見つけました https://velog.io/@hoho_0815/em-rem

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol