CSS pxの単位は何ですか?

CSS では、px の正式名はピクセルで、中国語で「ピクセル」を意味します。コンピュータ システムのデジタル画像の長さの単位です。画面を基準とした相対的な長さの単位です。ディスプレー解像度。一般的なコンピュータ モニタの解像度は 96DPI です。これは、1 ピクセルが 1 インチの「1/96」であることを意味します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

pxとは、ピクセルの略で、画像表示の基本単位であるピクセルのことです。英語の「ピクセル」を翻訳したもので、英語のpictureの一般的な略語です。英語の「要素」という単語は、Get ピクセルになるため、「ピクセル」は「画素」を意味し、ペル（画素）とも呼ばれます。

px (ピクセル、ピクセル): コンピュータ システムのデジタル画像の長さの単位である仮想的な長さの単位です。px を物理的な長さに変換する場合、精度 DPI (ドット/インチ、ピクセル)インチあたりのピクセル数) を指定する必要があります。通常、スキャンおよび印刷時に DPI オプションがあります。 Windows システムのデフォルトは 96dpi、Apple システムのデフォルトは 72dpi です。

CSS では、px は相対的な長さの単位であり、画面の表示解像度に相対します。

• #同じデバイス上で、各 CSS ピクセルによって表される物理ピクセルは変更できます (つまり、CSS ピクセルの相対性の最初の側面)。

• 異なるデバイス間では、各 CSS ピクセルによって表される物理ピクセルは変化する可能性があります (つまり、CSS ピクセルの相対性の 2 番目の側面)。

デバイスが異なると基本イメージが異なります。たとえば、モニターのドット ピッチは、モニターの物理ピクセルと考えることができます。現在の液晶モニターのドットピッチは0.25mm～0.29mmが一般的です。プリンターのインクドットはプリンターの物理ピクセルとも考えることができ、300DPI は 0.085mm、600DPI は 0.042mm となります。

通常、モニターの解像度と呼ばれるものは、実際にはモニターの物理的な解像度ではなく、デスクトップによって設定された解像度を指すことに注意してください。しかし、現在では LCD モニターが主流になりました。LCD の表示原理は CRT とは異なるため、デスクトップの解像度が物理的な解像度と一致している場合にのみ最高の表示効果が得られます。そのため、現在ではデスクトップの解像度はほとんど常に同じです。モニターの物理解像度 解像度は同じです。

CSS 仕様の定義によれば、CSS の px は相対的な長さであり、表示デバイスの解像度に関連します。この表示デバイスは通常、コンピュータ モニターです。一般的なコンピュータ モニタの解像度は 96DPI、つまり 1 ピクセルは 1/96 インチです (実際には、モニタの解像度が物理解像度と一致し、液晶点のピッチが実際に 0.25 mm から 0.29 mm の間であると仮定すると、したがって、正確に 1/96 インチになる可能性は低いですが、ほぼそれに近いものです)。

一般的に、px は対応するデバイスの物理ピクセルですが、出力デバイスの解像度がコンピューターのモニターと大きく異なる場合、出力効果に問題が発生します。たとえば、紙に出力されるプリンタの解像度はコンピュータ画面の解像度よりもはるかに高く、デバイスの物理ピクセルを拡大縮小せずに直接使用すると、600DPI プリンタで印刷されるコンピュータ上の写真は約 6 倍になります。モニターで見るよりも小さくなります。

したがって、CSS では、この場合、ブラウザーが一般的に一貫した読み取りエクスペリエンスを維持するためにピクセル値を拡大縮小および調整する必要があると規定しています。つまり、特定のピクセルの長さは、異なるデバイス出力上で常に同様のサイズに見える必要があります。

これを確実にするにはどうすればよいでしょうか?デバイスの物理ピクセルのサイズに合わせて直接変換するのももちろん1つの方法ですが、CSSではさらに考慮して「基準ピクセル」（参照ピクセル）に合わせて変換することを推奨しています。

目で見える大きさは見る角度によって異なります。視野角は、物体の実際のサイズと目からの距離によって異なります。 10メートル離れたところにある1メートル四方の物体は、1メートル離れたところにある10センチメートル四方の物体とほぼ同じ大きさに見える、これが葉っぱからは山が見えないという常識です。

したがって、CSS 仕様では視野角を使用して「参照ピクセル」を定義します。1 参照ピクセルは 1 ポイント (つまり 1 /96 インチ) の視野角です。

この違いに注意してください。CSS 仕様で定義されている参照ピクセルは 1/96 インチではなく、腕の長さでの視野角は 1/96 インチです。一般に、人間の腕の長さの平均は 28 インチであると考えられているため、画角は 0.0213 度と計算できます。 (つまり、(1/96) インチ / (28 インチ * 2 * PI / 360 度) )

出力に異なるデバイスを使用する場合、目とデバイスの出力の間の一般的な距離は異なります。たとえば、コンピューターのモニターは通常、腕を伸ばしたところにありますが、本や紙 (プリンターのデバイス出力に相当) を読むときは、通常、腕の近くにあります。テレビを視聴する場合は、テレビからより離れた場所に置くことになります。たとえば、一般的に推奨される長さは、テレビ画面の対角線の長さの 2.5 ～ 3 倍です。42 インチのカラー テレビの場合は、ほぼ 3 メートル離れたところにあります。映画を見ている場合…どのくらいの距離があるかわかりませんが、自分で測ることができます。

したがって、1 参照ピクセル:

コンピューター モニターの場合は 0.26 mm (つまり 1/96 インチ)、

レーザー プリンターの場合は 0.20 mm (仮定)読み取り距離は通常 55cm、つまり 21 インチです);

変換する場合、300DPI プリンタ (つまり、各ポイントは 1/300 インチ) の場合、1px は通常 3 ドット (約 0.25mm) に四捨五入されますが、600DPI プリンタの場合は 5 ドットに四捨五入される場合があります。は0.21mmです。

要約すると、px は相対単位であり、常に特定のデバイスにおける近似値です (原則として、参照ピクセルにできる限り近づけることです)。

ただし、絶対単位を出力効果の絶対的な制御として理解すると、状況はまったく異なります。 Web ページ出力の主な対象であるコンピュータ画面に関する限り、px はデスクトップの解像度と一致する基準単位と見なすことができ、LCD 画面の場合は、ほとんどの場合、コンピュータの物理解像度と一致します。液晶画面、つまりWebデザイナーが設定した1pxは「最終的にこのWebページを見るユーザーのモニター上の1ドット」と言われています！逆に、それらの絶対的な単位は決して絶対的なものではありません。

cm や pt などの絶対単位は、画面に表示されるときにピクセルに変換する必要があり、この変換はピクセルの実際の物理的な長さに基づいていないためです (ブラウザーは知る必要がなく、このモニターの現在の 1px の物理的な長さを知ることは不可能ですが、デスクトップによって設定された DPI に従って計算されます。言い換えれば、Web デザイナーは、特定のフォントが 12pt (つまり 1/6 インチまたは 4.2mm) であると指定します。実際、画面を測定すると、正確に 12pt であることはほとんど不可能ですが、12pt に近いのは 16px だけです ( 96DPIに従って変換)。スクリーン ピッチが 0.29 mm の場合、実際には 4.64 mm または 13.15 pt になります。デスクトップを大きいフォント（120DPI）に変更した場合、最終的な12ptは20pxに相当し、ドットピッチ0.29mmにより最終的な効果は16.44ptとなります。

以前は、Web デザイナーは px を使用しないことが推奨されていましたが、その理由の 1 つは、ユーザーが自分のニーズに応じてデスクトップ DPI を調整できるため、絶対的な長さの実際の長さを制御できるためです (早口言葉)。

しかし、これは実際には疑わしいです。絶対的な長さの実際の長さは必要に応じて調整できるため、px のような相対的な長さを必要に応じて調整できない理由はありません。写真を実際に印刷するときと同じように、必要に応じて拡大縮小することはもちろん可能です。 px で設定したフォントや画像も実際に表示するときに拡大縮小することができます。そうすると、Web デザイナーが指定した 1px はユーザーのデスクトップの 1px に対応しなくなります。代わりに、1.2px、1.5px、またはその他の値に対応する場合があります。

以前、ブラウザのフォント サイズ調整オプションは絶対長さ (ブラウザ内の DPI 調整に相当) に対してのみ有効で、px に対しては無効でした。これは設計上の問題としか言えません。 px ではなく、過去のブラウザの固有の問題です。ブラウザーは、ピクセル単位で設定されたフォントのスケーリングをサポートするようになりました。 Firefox と同様に、ユーザーはフォントのみを拡大縮小することも、画像も拡大縮小することも選択できます。したがって、オールピクセルの「ピクセルレベルの緻密な設計」は十分に実現可能であり、合理的だと思う設計手法でもあります。結局のところ、CSS の px は一貫した読み取りエクスペリエンスを保証することを目的としています。流動レイアウトか固定レイアウトか、異なる解像度に対応できるかどうかは別の話であり、単位をpxにするかどうかとは直接関係ありません。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS pxの単位は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。