2016-11-22 11 views
0

私は数ヶ月間同じ問題に直面しています。 サイズや位置をピクセル単位またはEM単位で定義すると、同じブラウザ内のさまざまな画面と解像度で別々に翻訳されます。CSSピクセル/ em単位がdiffent画面上に表示される

たとえば、私はDellのディスプレイ24 "1920x1080ピクセルを持っていて、私の同僚はDellの1600x1200ピクセルの解像度で24"の古いディスプレイを持っています。 問題は、同じWebページが異なって表示されることです。 たとえば、改行なしで同じ行に2つのボタンを配置し、CSSで適切なピクセル幅を設定すると、ディスプレイに行が壊れていないので、同僚の表示が壊れてしまいます。設定する必要があります数ピクセル以下のサイズ。 EMについても同様です。

一つ別の例:

enter image description here

ポジション絶対、私は次のスクロールバーにそれを持っている要素の負の右の位置を使用しています。私のコンピュータ上では、それは私の同僚のノートブック上でそれは密接に見える、大丈夫です。

画面上の単位とピクセルサイズの関係は何ですか? CSS3とHTML5のdoctypeにCSSシートを書き込んで、すべての解像度で適切な互換性を持たせるにはどうしたらいいですか?

同じ問題は、font-sizeとpaddingを使用してボタンと入力のサイズを設定すると、buttons/text入力と同じ問題が発生します。表示の解像度に依存するように見えます。

ありがとうございました!

答えて

0

em又はremは、現在のフォントのために定義されたフォントサイズに相対的であるようにあなたは、ビューポートの相対的な単位を使用しなければなりません。本文にフォントサイズが定義されていますか?

も読んでこのhttp://www.w3schools.com/cssref/css_units.asp

+0

だから、ベストプラクティスボディピクセルサイズのフォントサイズとを持っていることであろうすべての位置、サイズ、余白、パディングのためのその使用em単位またはレム単位の後? –

+0

自分のCSSを持っているならば、本体のフォントサイズをpxで定義する必要があります。そうでなければ、BootstrapやFoundationが16pxのデフォルトのフォントサイズを定義していることに留意してください。 16pxになります。 –

+0

他のデバイスで絶対ピクセル単位がどのようにカウントされているかという点で、さまざまな方法があるため、非相対単位を使用していないとわかっているので、異なるデバイス/デバイスで同じ結果を得るには相対単位を使用することが重要です相対単位を適切に数えるためには、ピクセル単位のフォントサイズをルート要素のデフォルトとして定義することが重要です。 Rem単位は、ページ全体のルート要素ではなく、親要素を基準にしています。ブートストラップに言及することは、インスピレーションだけでなく、良いことです。 –

関連する問題