2

私は em をよく読んでいて、em を使うべき理由がわかりました。

だから今、私はそれを自分のレイアウトに適用しようとしています。私のレイアウトでは、div隣同士に 2 つあります。左のものには がfont-size: 1em;あり、2 番目のものには がありfont-size: 0.8emます。

どちらdivも同じサイズとマージンを持つ必要があります。(この例では、幅 6em、余白 1em です)

今私がぶつかる問題:
最初divの withfont-size: 1emは (ブラウザのデフォルトでは 16px) 16 x 1 x 6 = 96px
2 番目divの withfont-size: .8emは16 x .8 x 6 = 76.8px

デモンストレーションとして、このJSFiddleを参照してください。

両方の div のサイズを同じにするには、異なるフォント サイズを使用するには、次のコードが必要です。

body {
    font-size: 1em;
}
div { 
    margin: 1em; 
    background: lightgreen;
    float: left;
}
.blue {
    width: 6em;
    height: 6em;
    clear: left;
    background: lightblue;
}
.small2 {
    font-size: .8em;
    width: 7.5em;    
    height: 7.5em; 
    margin: 1.25em;
}

つまり、で宣言した一般的なスタイルをdivのスタイルでオーバーライドする必要があります.small2。

これは進むべき道ですか、それとも私はより良い解決策を監督していますか?

4

3 に答える 3

3

sを使用してみてくださいrem。em と同じ利点がありますが<body>、含まれている要素ではなく、タグのフォント サイズに相対的です。

それで：

.blue {
    width: [target size, in pixels]
    width: 6rem;
    height: [target size, in pixels]
    height: 6rem;
    clear: left;
    background: lightblue;
}

rem はすべてのブラウザー (IE8 以前) でサポートされているわけではないため、それらを使用する場合はピクセル フォールバック (上記のように) を使用する必要があります。

于 2014-02-27T19:17:53.380 に答える