css3 px、em和rem_html/css_WEB-ITnose

1. まず、関係の変換を観察します (http://pxtoem.com/)

em の値は固定されていません。親要素のフォント サイズを継承します。

そのため、CSS を記述するときは、次の 2 つの点に注意する必要があります:

1. body セレクターで Font-size=62.5% を宣言します。 em を単位として、

3. 拡大されたフォントの em 値を再計算します。フォント サイズの繰り返しの宣言は避けてください。

それは、1.2 * 1.2= 1.44 の現象を避けるためです。たとえば、#content でフォント サイズを 1.2em と宣言した場合、p のフォント サイズを宣言する場合、この em はその em ではなく、フォントを継承するため、1.2em ではなく 1em のみにすることができます。 #contentの高さは1em=12pxになりました。

rem の特徴

rem は、CSS3 の新しい相対単位 (root em、root em) であり、広く注目を集めています。このユニットと他のユニットの違いは何ですか?違いは、rem を使用して要素のフォント サイズを設定する場合、相対的なサイズであることには変わりありませんが、HTML ルート要素に対してのみ相対的なサイズであることです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものであると言えます。これにより、ルート要素のみを変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。これをサポートしていないブラウザの場合、解決策は非常に簡単で、追加の絶対単位ステートメントを作成することです。これらのブラウザは、rem で設定されたフォント サイズを無視します。以下は

の例です:

p {font-size:14px; font-size:0.875rem;}

注: 使用するフォント単位は主にプロジェクトによって決まります。すべてのユーザーが最新バージョンのブラウザを使用している場合は、rem を使用することをお勧めします。互換性を考慮する場合は、px を使用するか、両方を同時に使用します。

使用法:

html {font-size: 62.5%;} --10/16 = 62.5%
body {font-size: 1.2rem;} --1.2*10px = 12px
h1 { font-size: 2.4rem;} --2.4*10px = 24px

注: フォントはフォントであり、幅は幅です。フォントサイズのパーセンテージは幅とは関係ありません