2

私はウェブサイトをデザインしました。私はcss、html、phpに慣れていないので、cssではすべてのサイズをpxで使用しました。しかし、画面の解像度を変更すると、Webページのコンテンツが適切ではなくなります。つまり、次のようになります。

ズームアウトすると、これはcssでこれを処理する方法の結果になりますか？同じことをググったとき、pxを使用する代わりにem /％を使用する必要があることがわかりました。

何を使うの？

  1. em
  2. px
  3. ％

幅と高さ。

編集1

ズームアウト後

4

2 に答える 2

4

font-size： font-size CSSプロパティは、フォントのサイズを指定します。フォントサイズは、emおよびexの長さの単位の値を計算するために使用されるため、他のアイテムのサイズを変更する可能性があります。

値

xx-小、x-小、小、中、大、x-大、xx-大

ユーザーのデフォルトのフォントサイズ（中程度）に基づく絶対サイズのキーワードのセット。ユーザーのデフォルトのフォントサイズがであるプレゼンテーションHTMLに似ています。

大きく、小さく

親要素のフォントサイズよりも大きいか小さいか。上記の絶対サイズのキーワードを区切るために使用される比率とほぼ同じです。

長さ

正の長さ。単位がemまたはexで指定されている場合、サイズは、問題の要素の親要素のフォントのサイズを基準にして定義されます。たとえば、0.5emは、現在の要素の親のフォントサイズの半分です。

パーセンテージ

親要素のフォントサイズの正のパーセンテージ。

emまたはex以外の単位での長さなど、ユーザーのデフォルトのフォントサイズに相対的でない値の使用は避けるのが最善です。ただし、そのような値を使用する必要がある場合は、オペレーティングシステムがモニターの解像度を（一般的に誤って）考えているかどうかによって意味が変わらないため、pxが他の単位よりも優先されます。

---考えられるアプローチ---

キーワード

キーワードは、Web上のフォントのサイズを設定するための良い方法です。body要素にキーワードのフォントサイズを設定することで、ページ上の他のすべての場所に相対的なフォントサイズを設定でき、それに応じてページ全体でフォントを簡単に拡大または縮小できます。

ピクセル

ピクセル精度が必要な場合は、フォントサイズをピクセル値（px）で設定することをお勧めします。pxの値は静的です。これは、OSに依存せず、ブラウザに文字通り、指定した高さのピクセル数で文字をレンダリングするように指示するクロスブラウザの方法です。同様の効果を達成するために異なるアルゴリズムを使用する可能性があるため、結果はブラウザ間でわずかに異なる場合があります。

フォントサイズ設定を組み合わせて使用​​することもできます。たとえば、親要素が16pxに設定され、その子要素がより大きく設定されている場合、子要素はページ内の親要素よりも大きく表示されます。

注：ユーザーはブラウザからフォントサイズを変更できないため、ピクセル単位でフォントサイズを定義することはできません。（たとえば、視界が限られているユーザーは、Webデザイナーが選択したサイズよりもはるかに大きいフォントサイズを設定したい場合があります。）したがって、包括的なデザインを作成する場合は、フォントサイズにピクセルを使用しないでください。

Ems

フォントサイズを設定する別の方法は、em値を使用することです。em値のサイズは動的です。font-sizeプロパティを定義する場合、emは、問題の要素の親に適用されるフォントのサイズと同じです。ページのどこにもフォントサイズを設定していない場合は、ブラウザのデフォルトであり、おそらく16pxです。したがって、デフォルトでは1em = 16px、2em=32pxです。body要素にフォントサイズを20pxに設定すると、1em=20pxおよび2em=40pxになります。値2は、基本的に現在のemサイズの乗数であることに注意してください。

必要なピクセル値に相当するemを計算するには、次の式を使用できます。

em =目的の要素のピクセル値/親要素のピクセル単位のフォントサイズたとえば、ページの本文のフォントサイズが1emに設定され、ブラウザの標準が1em=16pxであるとします。必要なフォントサイズが12pxの場合、0.75emを指定する必要があります（12/16 = 0.75であるため）。同様に、10pxのフォントサイズが必要な場合は、0.625em（10/16 = 0.625）を指定します。22pxの場合、1.375em（22/16）を指定します。

ドキュメント全体で使用する一般的な手法は、本文のフォントサイズを62.5％（つまり、デフォルトの16pxの62.5％）に設定することです。これは、10px、つまり0.625emに相当します。これで、ピクセル値を10で割ることにより、em単位を使用して任意の要素のフォントサイズを設定でき、覚えやすい変換が可能になります。このようにして、6px = 0.6em、8px = 0.8em、12px = 1.2em、14px = 1.4em、16px=1.6em。例えば：

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.6em; /* 1.6em = 16px */
}

emは、読者が使用することを選択したフォントに自動的に適応できるため、CSSで非常に便利な単位です。

于 2012-08-03T05:21:11.417 に答える
2

メインコンテンツ領域の幅がパーセント（％）のWebサイトは、一貫性がないためアドバイスされません。すべての解像度で機能するように、Webサイト全体で約960ピクセル（おそらく少し小さい）のピクセル幅を使用するのが最適です。

メインコンテンツ領域内の要素については、正確なピクセル値を計算することの両方に意味がないため、パーセント幅を使用することをお勧めします。結果は固定に設定されます。これは、ユーザー間で異なるモニターの解像度とは対照的に、親の固定幅のパーセンテージであるためです。

総括する：

の固定幅の親を使用し、wrapの内側に960px流体（ ）要素の幅を使用することをお勧めします。%wrap

サンプルコード：

開始するには、次のサンプルコードを使用できます。

HTML：

<div class="wrap">
    <!-- Other Elements -->
</div>

CSS：

.wrap {margin: 0px auto; width: 960px;}

詳細については、プログラマーに関するこの質問を確認してください：https ://softwareengineering.stackexchange.com/questions/135506/percent-or-pixels-html-css

于 2012-08-03T05:14:13.257 に答える