4

em-calcこれまで、Zurb Foundation プロジェクトで CSS サイズ定義に使用してきました。rem-calcしかし、最近、開発者がますます使用していることに気付きました 。

em-calc各関数が何をするかは知っていますが、いつorを使うべきかよくわかりませんrem-calc。

これら2つの機能の違いは何ですか?

4

1 に答える 1

8

実際、あなたの質問は、CSS で rem と em がどのように異なるのですか? (およびrem 単位と em 単位の実質的な違い) など

em-calc()入力の em 値をピクセル単位で rem-calc()返し、rem 単位を返します。実際にrem-calc()は、セレクターの font-size を設定するために を使用する場合、フォント サイズはhtml、直接の親ではなく、属性のフォント サイズに相対的であることを意味します。

次の例で違いを確認できます。

html

<body>
<section> section text
    <small>small text</small>
</section>   

<section class="rem"> section .rem text
    <small>small text</small>
</section>
</body>

sccs

section {
font-size: em-calc(24);
small { font-size: em-calc(12); }
}

section.rem {
font-size: rem-calc(24);
small { font-size: rem-calc(12); }
}

上記の結果は、次の図のようになります。

ここに画像の説明を入力

sectionタグのフォント サイズを変更します。

section {
font-size: em-calc(48);
small { font-size: em-calc(12); }
}

section.rem {
font-size: rem-calc(48);
small { font-size: rem-calc(12); }
}

両方のタグがusingsectionの直接の親であるため、または上記の font-size の場合、この例では違いがないことに注意してください。bodyrem-calc(48)rem-calc(48)section

結果は次のようになります。 ここに画像の説明を入力

ご覧のとおり、small のフォント サイズはその親に合わせて調整されません。

個人rem-calc()的には、ページの主要な構造要素 (ヘッダー、フッター、コンテンツ、ナビゲーションなど) とem-calc()、前の主要な要素にネストされた要素に使用する必要があると思います。

したがって、ここで使用する例については：

section {
font-size: rem-calc(20);
small { font-size: em-calc(10); }
}
于 2015-05-02T14:08:28.103 に答える