CSS画素(css pixel)および画素単位、例えばpx ptem
しょうじゅん
最近pc端、微信端、モバイル端のappをしています.会社のプロジェクトごとにこの3つがあります.pc端でページをデバッグすると、画素表示は予想通りですが、微信ページと携帯電話のページは天差地別で、googleでデバッグしています.結果、本物は効果を見て、同僚たちの携帯電話で異なる表示効果があります.そこで、画素単位に興味を持ちました.最近、自分で調べた資料によると、まとめをする.
ピクセルコンセプト
一般にpixel(画素)は画像の基本サンプリング単位である.詳細については、ウィキペディアピクセルエントリを参照してください.したがって、それは特定の物理量ではなく、特定の点または小さなブロック(点と小さなブロックで表現できるが)ではなく、抽象的な概念である.
CSS画素（css pixel）
CSS画素とは、Webプログラミングの概念であり、CSSスタイルコードで使用される論理画素を指す.CSS仕様では、長さ単位は、絶対単位と相対単位の2種類に分けられる.
CSS仕様の定義に従って、CSSのpxは相対的な長さであり、viewing deviceの解像度である.
デバイスピクセル(devicepixel):
デバイス画素設定は物理概念であり、デバイスで使用される物理画素を指す.異なる装置では、その画像の基本単位が異なり、例えばディスプレイのドットピッチは、ディスプレイの物理画素と考えられる.現在の液晶ディスプレイのドットピッチは通常0.25 mmから0.29 mmの間である.また、プリンタのドットは、プリンタの物理画素と考えられ、300 DPIは0.085 mm、600 DPIは0.042 mmである.
通常、ディスプレイ解像度とは、ディスプレイの物理解像度ではなく、デスクトップで設定された解像度を指します.ただし、現在は液晶ディスプレイが主流となっており、液晶の表示原理がCRTと異なるため、デスクトップ解像度が物理解像度と一致している場合にのみ、表示効果が最も優れているため、現在ではデスクトップ解像度はほとんどディスプレイの物理解像度と一致している.
デバイス画素とCSS画素の間の換算
一般にpxは対応するデバイスの物理画素であるが,出力デバイスの解析度がコンピュータディスプレイと大きく異なると出力効果に問題がある.例えば、プリンタが紙に出力されると、その解像度はパソコンの画面よりずっと高く、スケーリングせずにデバイスの物理画素を直接使用すると、パソコンの写真は600 DPIのプリンタから出てきて、ディスプレイで見るより約6倍小さくなります.
したがって、CSSは、この場合、ブラウザが画素値をスケーリングして、読書体験のほぼ一致を維持しなければならないと規定している.すなわち、一定画素の長さを維持するには、異なるデバイス出力で見られる大きさが常に劣っている.デバイスの物理画素の大きさに直接換算するのは当然のことですが、CSSはより多くのことを考慮しており、変換は「参照画素」(reference pixel)に従うことをお勧めします.
目に見える大きさは、可視角度によって異なります.可視角度は物体の実際の大きさと物体と目の距離に依存する.10メートル先の1メートル四方のものと、1メートル先の10センチ四方のものと、見た目の大きさの差が少ないのは同じで、一葉障壁とは泰山が見えないという常識だ.
したがって、CSS仕様では、視点を用いて「参照画素」を定義し、1参照画素が、96 DPIのデバイス出力(すなわち、1インチ96ドット)のとき、1ドット(すなわち、1/96インチ)の視点である.
この違いに注意してください.CSS仕様で定義されている参照画素は1/96インチではなく、1/96インチが腕の遠くに見える視点です.通常、人間の腕の長さは28インチと考えられるため、その視野角は0.0213度と算出できる.(すなわち(1/96)in/(28 in 2 PI/360 deg))
異なるデバイス出力を用いる場合,眼とデバイス出力の典型的な距離は異なる.例えばiPhone 5はRetina網膜スクリーンを使用し、2 px x 2 pxのdevice pixelは1 px x 1 pxのcss pixelを表すので、デバイス画素数は640 x 1136 px、CSS論理画素数は320 x 568 pxである.
ピクセル単位
ここには、一般的なものが1つだけ表示されます.
ぜったいたんい
px
px単位名はピクセルで、ピクセル(px)はディスプレイの画面解像度に対して、このピクセル長はディスプレイで見た文字スクリーンのピクセルとは関係ありません.また、特定のデバイスでは常に近似値(基準画素にできるだけ近づくことが原則)である.pxは実際には角度で測定される単位です.
相対単位
em
1 emは、親要素のフォントサイズを継承するフォントのサイズを指します.したがって、一定の値ではありません.最初にメジャーをレイアウトするときは、現在のフォント大文字「M」のサイズに基づいています.
フォントだけでなく、行間(line-height)、縦高さの単位もemを使います.スケーリング時の全体性を保証します.
Emはフォントの高さを指し、任意のブラウザのデフォルトのフォントの高さは16 pxです.したがって、調整されていないブラウザは、1 em=16 pxと一致します.では、12 px=0.75 em、10 px=0.625 emである.
Emは以下の特徴がある:1.Emの値は固定ではありません.2.emは親要素のフォントサイズを継承します.
Em巧用:中国語の文章の中で、普通の段落の頭は2格空いています.pxを単位とすると、12 pxフォントでは24 pxを空ける必要があり、14 pxフォントでは28 pxを空ける必要がある......という換算は非常に通用しません.em単位を使うと、この問題はよく解決され、1文字の大きさは1 emで、その2文字の大きさは2 emです.したがって、このように定義するだけでいいです.p { text-indent: 2em; }
参考資料：
フロントエンドエンジニアが理解しなければならない「画素」文/阿樹(簡書著者)画素(px)はいったいどんな単位CSSの長さ単位なのか.
一般にpixel(画素)は画像の基本サンプリング単位である.詳細については、ウィキペディアピクセルエントリを参照してください.したがって、それは特定の物理量ではなく、特定の点または小さなブロック(点と小さなブロックで表現できるが)ではなく、抽象的な概念である.
CSS画素（css pixel）
CSS画素とは、Webプログラミングの概念であり、CSSスタイルコードで使用される論理画素を指す.CSS仕様では、長さ単位は、絶対単位と相対単位の2種類に分けられる.
CSS仕様の定義に従って、CSSのpxは相対的な長さであり、viewing deviceの解像度である.
デバイスピクセル(devicepixel):
デバイス画素設定は物理概念であり、デバイスで使用される物理画素を指す.異なる装置では、その画像の基本単位が異なり、例えばディスプレイのドットピッチは、ディスプレイの物理画素と考えられる.現在の液晶ディスプレイのドットピッチは通常0.25 mmから0.29 mmの間である.また、プリンタのドットは、プリンタの物理画素と考えられ、300 DPIは0.085 mm、600 DPIは0.042 mmである.
通常、ディスプレイ解像度とは、ディスプレイの物理解像度ではなく、デスクトップで設定された解像度を指します.ただし、現在は液晶ディスプレイが主流となっており、液晶の表示原理がCRTと異なるため、デスクトップ解像度が物理解像度と一致している場合にのみ、表示効果が最も優れているため、現在ではデスクトップ解像度はほとんどディスプレイの物理解像度と一致している.
デバイス画素とCSS画素の間の換算
一般にpxは対応するデバイスの物理画素であるが,出力デバイスの解析度がコンピュータディスプレイと大きく異なると出力効果に問題がある.例えば、プリンタが紙に出力されると、その解像度はパソコンの画面よりずっと高く、スケーリングせずにデバイスの物理画素を直接使用すると、パソコンの写真は600 DPIのプリンタから出てきて、ディスプレイで見るより約6倍小さくなります.
したがって、CSSは、この場合、ブラウザが画素値をスケーリングして、読書体験のほぼ一致を維持しなければならないと規定している.すなわち、一定画素の長さを維持するには、異なるデバイス出力で見られる大きさが常に劣っている.デバイスの物理画素の大きさに直接換算するのは当然のことですが、CSSはより多くのことを考慮しており、変換は「参照画素」(reference pixel)に従うことをお勧めします.
目に見える大きさは、可視角度によって異なります.可視角度は物体の実際の大きさと物体と目の距離に依存する.10メートル先の1メートル四方のものと、1メートル先の10センチ四方のものと、見た目の大きさの差が少ないのは同じで、一葉障壁とは泰山が見えないという常識だ.
したがって、CSS仕様では、視点を用いて「参照画素」を定義し、1参照画素が、96 DPIのデバイス出力(すなわち、1インチ96ドット)のとき、1ドット(すなわち、1/96インチ)の視点である.
この違いに注意してください.CSS仕様で定義されている参照画素は1/96インチではなく、1/96インチが腕の遠くに見える視点です.通常、人間の腕の長さは28インチと考えられるため、その視野角は0.0213度と算出できる.(すなわち(1/96)in/(28 in 2 PI/360 deg))
異なるデバイス出力を用いる場合,眼とデバイス出力の典型的な距離は異なる.例えばiPhone 5はRetina網膜スクリーンを使用し、2 px x 2 pxのdevice pixelは1 px x 1 pxのcss pixelを表すので、デバイス画素数は640 x 1136 px、CSS論理画素数は320 x 568 pxである.
ピクセル単位
ここには、一般的なものが1つだけ表示されます.
ぜったいたんい
px
px単位名はピクセルで、ピクセル(px)はディスプレイの画面解像度に対して、このピクセル長はディスプレイで見た文字スクリーンのピクセルとは関係ありません.また、特定のデバイスでは常に近似値(基準画素にできるだけ近づくことが原則)である.pxは実際には角度で測定される単位です.
相対単位
em
1 emは、親要素のフォントサイズを継承するフォントのサイズを指します.したがって、一定の値ではありません.最初にメジャーをレイアウトするときは、現在のフォント大文字「M」のサイズに基づいています.
フォントだけでなく、行間(line-height)、縦高さの単位もemを使います.スケーリング時の全体性を保証します.
Emはフォントの高さを指し、任意のブラウザのデフォルトのフォントの高さは16 pxです.したがって、調整されていないブラウザは、1 em=16 pxと一致します.では、12 px=0.75 em、10 px=0.625 emである.
Emは以下の特徴がある:1.Emの値は固定ではありません.2.emは親要素のフォントサイズを継承します.
Em巧用:中国語の文章の中で、普通の段落の頭は2格空いています.pxを単位とすると、12 pxフォントでは24 pxを空ける必要があり、14 pxフォントでは28 pxを空ける必要がある......という換算は非常に通用しません.em単位を使うと、この問題はよく解決され、1文字の大きさは1 emで、その2文字の大きさは2 emです.したがって、このように定義するだけでいいです.p { text-indent: 2em; }
参考資料：
フロントエンドエンジニアが理解しなければならない「画素」文/阿樹(簡書著者)画素(px)はいったいどんな単位CSSの長さ単位なのか.
p { text-indent: 2em; }フロントエンドエンジニアが理解しなければならない「画素」文/阿樹(簡書著者)画素(px)はいったいどんな単位CSSの長さ単位なのか.