css - 流動的なレイアウトのEmとpxの設定

Question

最適なフォントサイズとレイアウトサイズについて読んでいます...そしてpxの代わりにemを調べています。

私が理解していることから、私がこのようにcssを作成すると、

html {
font-size: 16px;
}

body {
    font-size: 1em;
}

ブラウザに16px=1emを強制します。これにより、目的のピクセル/ 16を計算して、幅と高さのプロパティを実行できるようになります。

score 0 · Accepted Answer

ほとんどすべてのブラウザは、デフォルトのフォントサイズを16pxにしました。

したがって、bodyタグにfont-size：100％を設定するだけで、それから作業を行うことができます。

基本サイズからフォントサイズを計算するために私が使用する良いサイトは次のとおりです。

設定タブで16pxに変更するだけで、設定できます。

score 0 · Accepted Answer

あなたは正しいです、そして@BillyMoatもそうです。

HTML要素で16px値を明示的に宣言しても、実際には何も得られません。ブラウザはとにかくそうする傾向があります。

使用できるもう1つのトリックは、「62.5％」トリックです。

宣言する場合：

body { font-size: 62.5% }

ピクセル測定値にきちんとマッピングされるemでさらに宣言を行うことができます。例えば：

h1 { font-size: 3em; /* equals 30px */ }
h2 { font-size: 2.4em; /* equals 24px */ }
.nav { width: 50.5em /* equals 505px */ }

これは、10/16=.625であるためです。したがって、このトリックを使用すると、測定値をリベースでき、後で16pxベースを処理するための計算を行う必要がありません。

このメソッドの唯一のトリックは、要素のフォントサイズを宣言すると、すべての子要素がその親の値に基づいたem値を持つ必要があることです（これはすべての相対的な測定単位に当てはまります）。

2 に答える 2