css - 1em は 16px として設定されていません

Question

クライアントが 0.875em のタイトルを希望する Web サイトに取り組んでいます。

オンラインで確認したところ、最近のブラウザの基本 em 単位は 16px である必要があります。クロム開発者で text-size を 1em に設定すると、16px ではなく 12px に設定されます。

最初に設定body{font-size:100%}してみました。運がない。

16pxベースに戻すにはどうすればよいですか?

ありがとう！

Answer 1

これは、Chrome のデフォルトの font-size が 12px であるためです。次のように、body および/または html 要素の font-size を 16px に設定する必要があります。

html, body {
    font-size: 16px;
}

em はサイズを設定する最も近い親に対する相対的なサイズであるため、これは、この font-size を変更する親要素がないことを前提としています。絶対的なサイズのフォントが必要な場合はremを確認してください。ただし、これは古いブラウザーではサポートされていないため、フォールバックを提供する必要があります。

Answer 2

問題を修正しました。

em の font-size は加算されます。

問題は、ベースが 16px で子を 0.875em に設定し、別の子も 0.875em に設定すると、サイズが 0.875em の 0.875em の 16px に設定されることです。

直接の親を必要な正確なサイズに設定する必要があります。したがって、私の場合、親を 16px に設定してリセットします。次に、直接の子を 0.875em にします。