-1

私は新しいプロジェクトを開始していて、前に em を与えると思っていましたが、パディング、マージン、行の高さなど (フォント以外のもの) に em を使用すると、ブラウザーがそれらを適切に計算しないことに気付きました。

例：

Firebug を使用して、ピクセルを使用して要素をすばやく配置し、ピクセル サイズ/ベース フォントの式を使用してスタイルシートに変換しました。したがって、25px / 16px = 1.5625

ブラウザを更新すると、要素が数ピクセルずれていて、切り上げたり切り捨てたりする必要があるように見えます。

それは私だけですか、それとも他の誰かが気づいた、または解決策を持っていますか?

回答: ベース フォントが間違っていました!!

4

2 に答える 2

1

公式ピクセルサイズ/ベースフォントを使用して、スタイルシートでそれらを翻訳しました。だから25px / 16px

ems を使用している場合は、ピクセルを残すことをお勧めします。16px のベース フォントのアイデアは信頼できません。ユーザーの実際のベース フォント (システム フォント) のサイズがわからないため、これは単なる一般的なガイドです。

また、ピクセルの % で処理する場合、各ブラウザーにはそれを処理する独自の方法 (切り上げや切り下げなど) があり、ブラウザーに任せる必要があります。Web では、すべてが相対的であり、ページの要素がすべて互いに適切な比率で設定されている限り、デザインはどのズーム レベルまたはビューポート幅でも適切に機能するはずです。

于 2013-05-25T15:12:57.067 に答える
-2

EM は、子要素にネストされると複合化されます。たとえば、body の font-size: を 16px として、ヘッダーに 1.1em を使用し、そのヘッダー内にメニュー項目があり、それを 1em に設定すると、1.1em(mostおそらく18px前後）。

これを回避するには、「ルート」EM を表す REM を使用します。これにより、ネストされたときにサイズが複合されるのを防ぎます。ただし、さまざまなブラウザーでのこれに対するサポートは限定的です。これを回避するには、PX フォールバックを使用します。フォールバックでは、すべてのブラウザーが最後に受け入れられたルールを使用します。ルールを理解していない場合 (REM)、無視して PX を使用します。

header {
   font-size: 18px;
   font-size: 1.1rem;
}
nav {
   font-size: 16px;
   font-size: 1rem;
}

最後に、EM/REM は固定ピクセルではなく、PERCENTAGES のようなものであることを理解することが重要です。

于 2013-05-25T15:47:08.687 に答える