どのようにメディアクエリが大きなsmatphone解像度を差別化し、低タブレット解像度が

Question

例を表示します：

サムスンギャラクシーS7 - 5.1インチ、1440 X 2560ピクセル - スマートフォン

エイサーIconiaタブA500 - 10.1インチ、800×1280 px - タブレット

@media screenと（max-width：480px）を設定すると、これはスマートフォンを認識するはずです。 タブレットの解像度が低い場合はどうすれば可能ですか？

メディアクエリーは、実際の解像度ではなく他のものを測定しますか？

Answer 1

ユニットCSSでpxではない物理的画素参照画素ある：

基準画素は、96DPIの画素密度との距離と、デバイス上の一つの画素の視野角であります腕の長さのリーダー。したがって、公称アームの長さが28インチの場合、視角は約0.0213度になります。したがって、アームの長さでの読み取りの場合、1pxは約0.26mm（1/96インチ）に相当します。一般

（カスケーディングスタイルシートレベル2リビジョン2（CSS 2.2）仕様、section 4.3.3. Lengths）

、1pxは約90-120画素の「標準的な定義」ピクセル密度を有するデバイス上の1つの物理画素であります/インチ。デスクトップブラウザでは、1pxは1つのデバイスピクセルと見なされます。

1pxに対応するデバイスピクセルの数は、デバイスのピクセル密度と倍率によって異なります。デフォルトの倍率レベルで

<meta name="viewport" content="width=device-width,initial-scale=1"> 

S7は、1px約3.5デバイスピクセルを使用します。あなたは

@media screen and (min-resolution: 2dppx) { 
    /* This is a high-dpi device */ 
}