2010-12-31 8 views
3

私は個人的なウェブサイトで作業しています(時間はここでは問題ありません)、私はすべてのフォントサイズ、境界幅、線高さなどを含む。 私はすべての方法でemを使用するよう努力しましたが、他のブラウザ(Chromiumなど)でウェブサイトをテストしたところ、コンテンツは「ピクセル完璧」のグリッドに一致しませんでした。CSS em対px(丸め誤差)

ここで私の質問は、pxを代わりに使うべきですか?私はemが「行く方法」であることを知っていますが、今日ではほとんどのブラウザがフルページズームを実装しています(テキストのみのサイズ変更はしません)、ボーダー幅とラインハイトを扱う場合、なぜなら私はサブピクセルの丸めを完全に避けることができるからです。

これはあなたのテイクですか? (btw、IEをサポートすることは私の目標の1つではなく、それほど気にすることはできませんでした)

+0

ソースコードとスクリーンショットをレンダリングの違いとともに表示できますか? –

答えて

2

コンテンツは私の "pixel-perfect"グリッドと一致しませんでした。

ピクセル完全グリッドで作業する場合は、ピクセル値を使用します。 は、レイアウトが異なるコンテンツサイズに適応できる場合にのみ有効な相対値です。

+0

すべての "ピクセルは悪い"誇大広告は私を笑った – pwseo

+0

@pwseoええ:)あなたがアクセス可能なサイトを構築したり、モバイルデバイスなどをサポートしなければならない場合はもちろん、誇大宣伝にいくつかの物質があります。デスクトップデバイスであり、ピクセル完全性に依存するレイアウトを持つ場合、 'px'が行く方法です。 –

+0

ええ、そうだと思います... calc()関数のようなものがあり、calc(2em - 1px)のようなものを作る必要があります:D – pwseo

2

フォントサイズに依存する要素の場合にのみemを使用します。

ボーダー(およびその幅)のような要素は通常、フォントサイズに依存しません。

+0

フォントサイズに依存しないのは分かっていますが、枠線や線の高さ(フォントサイズに依存します)がある場合は、丸めが必要な場合があります。 – pwseo

0

マージンとパディングにemを使用すると、相対測定で面白いことができることがわかりました。

emはネストされた要素に累積する可能性があり、一部の値をバックアップして外側の要素と揃えることができます。

ブラウザウィンドウを非常にゆっくりと縮小し、入れ子になった要素の値が外側の親とは異なるピクセルに丸められることがあることがわかります。

これと対処するために、親レベルでremを使用してフォントサイズを設定しました。これにより、親と子孫が同じ基本相対値で動作することができます。