CSSでのpxの意味は何ですか？

CSS では、px の正式名はピクセルで、中国語で「ピクセル」を意味します。これは、CSS スタイル コードで使用される論理ピクセルを指します。モニターを基準とした相対的な長さの単位です。画面解像度の

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

px ピクセル (CSS ピクセル)

px はピクセルの略で、ピクセル単位であり、ピクセルの基本単位です。画像表示。 CSS では、px は画面表示解像度に対する相対的な長さの単位です。

CSS ピクセル:

仮想ピクセル、デバイス非依存ピクセル、論理ピクセルとも呼ばれ、直感的なピクセルとしても理解できます。 CSS ピクセルは、CSS スタイルのコードで使用される論理ピクセルを指す Web プログラミングの概念です。たとえば、iPhone 6 の CSS ピクセル数は 375 x 667px です。

仮想ピクセルは、CSS および JS で使用される抽象的な単位である「直感的な」ピクセルとして理解できます。ブラウザ内のすべての長さは CSS ピクセル単位であり、CSS ピクセルの単位は px です。

CSS 仕様では、長さの単位は絶対単位と相対単位の 2 つのカテゴリに分類できます。 Px は、デバイスのピクセルに対する相対単位です。

同じデバイス上では、各 CSS ピクセルによって表される物理ピクセルは変化する可能性があります (つまり、CSS ピクセルの相対性の最初の側面);
異なるデバイス間では、それぞれ 1 つの CSS によって表される物理ピクセルピクセルは変更できます (つまり、CSS ピクセルの相対性の 2 番目の側面);

px は実際にはピクセルの略語であり、画像表示の基本単位であり、明確な物理量でも、点または小さな正方形ですが、抽象的な概念です。したがって、ピクセルについて話すときは、必ずその背景を理解してください。必ずその文脈を理解してください。必ずその文脈を理解してください。

CSS ピクセルの相対性を理解するための例を見てみましょう

PC ブラウザでページを開いたとします。このときのブラウザの幅は 800px です。同時にページ上に幅 400 ピクセルのブロックレベル要素コンテナーがあります。この時点で、ブロック コンテナーがページの半分を占めることは明らかです。

しかし、(「Ctrl キー」と「キー」を使用して) ページを拡大すると、ズームは 200% となり、元のサイズの 2 倍になります。このとき、ブロックコンテナはブラウザ全体を水平方向に占有します。

矛盾しているのは、ブラウザ ウィンドウのサイズを変更したり、ブロック要素の CSS 幅を変更したりしていないにもかかわらず、2 倍大きく見えるということです。これは、CSS ピクセルを 2 倍に拡大しているためです。

CSS ピクセルが画面ピクセルと同じサイズ 1:1 の場合:

CSS ピクセル (黒枠) が引き伸ばされ始めます。この時点では 1 CSS ピクセル 1 画面ピクセルより大きい

#つまり、デフォルトでは、CSS ピクセルは物理ピクセルの幅と同じである必要がありますが、ブラウザの拡大操作によってCSS ピクセルはデバイスの 2 ピクセル幅に相当します。高 PPI デバイスでは、CSS ピクセルはデフォルトでも複数の物理ピクセルのサイズと同等です。

上記の例からわかるように、CSS ピクセルは常に単なる相対値です。

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

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