CSS ピクセルとさまざまなモバイル画面適応の問題に対する解決策

ピクセル

解決

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

UI ドラフトピクセル

UI ドラフトのピクセルは物理的なピクセルを指します。たとえば、750 ピクセルは、私たちが受け取った UI デザインドラフトの物理的なピクセルです。

フロントエンドピクセル

2 つの画面の論理ピクセルが同じであれば、表示効果は同じになります。つまり、CSSの世界のpxは同じであり、同じ物理サイズの画面での表示効果は同じです。

では、実際に画面に表示されるとき、それらの関係はどのようなものになるのでしょうか?

下の図に示すように、Web ページ上の要素の CSS ピクセル (幅: 2 ピクセル、高さ: 2 ピクセル) を設定すると、dpr=1 のディスプレイでは最終的に 4 つの物理ピクセルを占有し、dpr=2 のディスプレイでは 16 の物理ピクセルを占有することになります。このことから、CSS ピクセルの物理的なサイズは異なる画面上で一貫していますが、1 つの CSS ピクセルに対応する物理ピクセルの数は異なることがわかります。

さまざまな画面に対応するRem適応ソリューション

<!-- mステーションモバイル端末適応js -->

  // 物理ピクセル幅 750 1rem=100px に適応   
  // clientWidth (実際の論理ピクセル) / 375 (参照ベンチマーク論理ピクセル) = fontSize (実際の 1rem ピクセル値) / 100 (参照 1rem 論理ピクセル値)
  ;(関数(win, doc){
    関数の変更(){
        doc.documentElement.style.fontSize=100*doc.documentElement.clientWidth/375+'px';
    }
    変化（）;
    win.addEventListener('resize', change, false);
  })(ウィンドウ、ドキュメント);
  // この方法で、異なる論理ピクセルでの 1rem の実際の値を計算できます。 // 実際の作業では、UI デザインの下書きの幅が 750px の場合、測定された幅を 200 で割る必要があります。
  // コンソールを開いて要素間の距離を確認すると、デザイン ドラフト上の距離の半分になっています。デザイン ドラフトの物理ピクセルは 2px で、論理ピクセルの 1px に相当します。
  // 当社の現在の設計案はすべて Blue Lake です。幅は標準 375 です。したがって、測定した幅を 100 で割るだけで、実際の幅が rem 単位で得られます。

  // 添付資料: もちろん他の適応スキームもありますが、REMスキームが採用されていない限り、REM原則は同じです。

Apple の携帯電話にはなぜ二重または三重の画像が必要なのでしょうか?

2倍スクリーンを例に挙げる