CSS > HD スケーリング原理の分析_html/css_WEB-ITnose

私は最近、Retina スクリーンの適応問題について研究しています。具体的な計画を議論する前に、いくつかの理解メモを作成しました。以下にまとめます。具体的な計画については、別の記事で説明します。

1. のビューポートはレイアウト ビューポートのスケーリングです

2. 初期スケール理想ビューポートに基づいています

3. 理想ビューポートは各デバイスによって提供され、理想ビューポートの幅もデバイスの独立したピクセルです

4. いわゆる「独立」とは、このデバイスの独立したピクセルがピクセル密度とは何の関係もないことを意味します

5. Retina スクリーンはデバイスのピクセル (物理ピクセル) を増加させます)、物理ピクセルには密度の変化があります

6. dpr = 物理ピクセル/デバイスに依存しないピクセル = デバイスのピクセル数/デバイスの理想的なビューポート幅

7. dpr は、CSS メディアの JavaScript の window.devicePixelRatio を通じて取得できます。 クエリ内の名前は device-pixel-ratio です。

8. CSS ピクセルと物理ピクセルには違いがありますCSS ピクセルがより多くの物理ピクセルにまたがる場合はぼやけますが、そうでない場合は CSS ピクセルがレイアウト ビューポートで使用されます。

9. スケールは CSS ピクセルと物理ピクセルの間の比例関係を調整できます。ピクセル。高解像度画面のスケーリング ソリューションは次のとおりです。レイアウト ビューポートが理想的なビューポートの 2 倍に拡張される場合、つまり、理想的なビューポート スケーリング比が 1/2 の場合、CSS ピクセルが占める物理ピクセルは以前よりも少なくなり、明瞭度

   • レイアウト ビューポート/理想ビューポート = CSS ピクセル/デバイス非依存ピクセル = 1/スケール

   • 物理ピクセル/デバイス非依存ピクセル = dpr

   • ページの明瞭さの要件 - CSS ピクセル/物理ピクセル = 1

   • つまり、スケーリング比 = 1/dpr

次の関係比からわかります:

1. レイアウト ビューポート (CSS ピクセル): デバイスに依存しないピクセル (理想的なビューポート ): 物理ピクセル

2. デバイスに依存しないピクセルはミドルウェアと見なすことができます:

   • dpr=1、initial-scale= 1.0 の場合、レイアウト ビューポートは次と等しくなります。デバイス非依存ピクセル、デバイス非依存ピクセルは物理ピクセルと等しいため、レイアウト ビューポートは物理ピクセルと等しく、1 CSS ピクセルは 1 物理ピクセルにまたがります

   • dpr=2 の場合、初期値を設定します-scale=1.0、レイアウト ビューポートはデバイスに依存しないピクセルと等しく、デバイスに依存しないピクセルは物理ピクセルの半分であるため、レイアウト ビューポートは物理ピクセルの半分となり、1 つの CSS ピクセルは 4 つの物理ピクセルにまたがります

   • dpr=2、initial-scale=0.5 の場合、レイアウト ビューポートはデバイス非依存ピクセルの 2 倍であり、デバイス非依存ピクセルは物理ピクセルの半分であるため、レイアウト ビューポートはデバイスと等しくなります。ピクセル、1 CSS ピクセルは 1 物理ピクセルにまたがります

3. 高解像度画面をもう一度調べてみましょう。デバイスに依存しないピクセルは 375px、dpr= に設定されています。 2、物理ピクセルは 750px、要素 DIV div{width: 375px}:

   • initial-scale=1.0 の場合、1 つの CSS ピクセルは 4 つの物理ピクセルにまたがるため、DIV は次のようになります。フルスクリーン

   • initial-scale=0.5 の場合、1 CSS ピクセルは 1 物理ピクセルにまたがるため、DIV は画面の半分のみを占めます。フルスクリーンを維持したい場合は、次のことが必要です。 DIV を div{width: 750px} に変更するには、

   • たとえば、最初のケースでは、通常の画像が引き伸ばされ、2 番目のケースではぼやけます。高解像度画像

4. を異なる画面の要素として設定するのは非常に面倒なので、開発者は画面間のサイズ単位があるかどうかを考慮する必要があります。解決策

   • rem: 通常の画面を使用する場合、set: root{font-size: 10px }、高解像度画面の場合は 37.5rem が 375px、set: root{font- size: 20px} の場合、37.5rem は 750px です。したがって、異なる画面でルート要素を変更するには、DIV 要素に 37.5rem を設定するだけで済みます。フォント サイズは、すべての画面と互換性があります。

   • vw と wh: レイアウト ビューポートのサイズを基準にして計算します。通常の画面のレイアウト ビューポートは 375 ピクセルですが、vw/vh ユニットの最終結果は 750 ピクセルです。それに応じて変更されます