5

私は最近、レスポンシブ コーディングを学ぼうとしていますが、私が読んだ本やチュートリアルでは、em とパーセンテージの使用が絶えず変化しています。だから私は疑問に思っていました.いつemを使うのが適切で、いつパーセンテージを使うのが適切ですか?

4

3 に答える 3

6

他の回答を明確にするために、ems はカスケードしませんが、パーセンテージはカスケードします。このように考えてください: ems は現在の要素に対して相対的であり、パーセンテージはコンテナーに対して相対的です。したがって、パーセンテージを使用して div 内の div の幅を指定すると、実際には内側の div が外側の div よりも小さく (または大きく) なりますが、同じネストされた div の幅を指定するために ems を使用すると、具体的に期待する幅になります。それらはあるべきです。一般に、レスポンシブ デザインが必要な場合は、ems を使用してフォントのタイポグラフィを指定し、パーセンテージを使用して要素のサイズを指定する必要があります。

于 2013-09-25T21:25:47.163 に答える
1

これは本当に好みです。一部のユーザーは、設定body{font-size: 62.5%;}(ブラウザのデフォルトが 16px の場合は 10px) を指示し、それ以降はems を使用します。したがって、22px の font-size が必要な場合は、 を使用します2.2em。ただし、ほとんどの開発者はこの問題について独自の意見を持っています。パーセンテージを常に使用するものもあります。常にピクセルを使用するものもあります。

em次のように、現在のフォント サイズに相対的な測定値です。

body{font-size: 16px;}
.someClass{font-size: 1em;} /* 16px */
.someOtherClass{font-size: 2em;} /* 32px */
.anotherClass{font-size: .5em;} /* 8px */

ドキュメント内のどの親要素にも値が設定されていない場合font-size、ブラウザのデフォルト (ほとんどの場合 16px) のフォント サイズ == 1em。

パーセンテージは、親コンテナーのフォント サイズではなく、親コンテナーに対して相対的であるという点で同様に機能します。

body{width: 800px;}
.someClass{width: 100%;} /* 800px */
.someOtherClass{width: 200%;} /* 1600px */
.anotherClass{width: 50%;} /* 400px */

両方のシナリオで注意すべき問題は、それらが両方ともカスケードすることです。つまり、2 つのクラスが設定されていfont-size: 2emて、それらをネストすると4em、内側の要素になります。

于 2013-06-07T18:54:43.860 に答える
0

em と % はどちらもレスポンシブ Web デザインに適しています。
誰もが言ったように、一般的に em はフォント サイズを定義するために使用され、% は要素のような<div>サイズを定義するために使用されます。
しかし、私の経験では、要素内にフォントがあるときに要素に % を使用すると、要素内のフォントの長さに応じて要素を調整できることがわかりました。
たとえば、要素内のステートメントが 20px で完了する場合、100% は 20px を与え、10px で完了する場合、div の 100% は 10px を与えます。
したがって、内部にいくつかのフォント/単語がある div にデザインを与える場合は、正確さのために em を使用することをお勧めします。

于 2016-01-07T11:09:29.227 に答える