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

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倍スクリーンを例に挙げる

元の 2*2 ピクセル画像は 2 倍画面上の 4*4 ピクセルで構成されているため、描画する必要のあるピクセルは周囲の領域で同様のピクセルを探すことになり、ぼやけの問題が発生します。仕事で高精細な画像を表示するには、Apple の二重画像が一般的に使用されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  GaussDB for MySQL パフォーマンス最適化の詳細な説明

>>:  vue3+vite プロジェクトで svg を使用する方法の詳細なグラフィック説明

推薦する

2秒以内にHTMLページ内の他のページにリダイレクトする方法

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

なぜ IE6 が最も多くの人に使用されているのでしょうか?

まず第一に、私はウェブデザイナーです。具体的には、私は XHTML フロントエンド デザイナーです。...

アコーディオン効果を実現するJavaScript

この記事では、アコーディオン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Dockerfileを使用して独自のイメージを作成する方法

1. 空のディレクトリを作成する $ cd /home/xm6f/dev $ mkdir myapp...

vue3 を使用してマテリアル ライブラリを構築する方法

目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...

進捗バー効果を実現するJavaScript

この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...

CSS フロート(float, clear)の人気の解説と体験談

私はかなり昔に CSS に触れましたが、フローティングについてはいつも混乱していました。私の理解が浅...

MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析

この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...

Linux で圧縮ファイルの内容を表示する 10 の方法 (要約)

一般的に、アーカイブされたファイルや圧縮されたファイルの内容を表示するには、まず解凍してから表示する...

ドロップダウンメニューを実現するためのHTML+CSS

1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...

MySQLカスタム関数の簡単な使用例

この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...

docker に openjdk をインストールして jar パッケージを実行する方法

画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...

Vueのフロントエンドシステムとフロントエンドとバックエンドの分離の詳細な説明

目次概要フロントエンド知識システムフロントエンドの3つの要素プレゼンテーション層 (CSS)動作レイ...

Vue+ElementUI Treeの使い方

Vue+ElementUI Treeの使い方は参考までに。具体的な内容は以下のとおりです。 フロント...