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 を使用する方法の詳細なグラフィック説明

推薦する

ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブ レイアウトでは、iframe 要素に注意する必要があります...

Web ページのソース ファイルを表示できない場合はどうすればよいですか?

Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...

固定サイドバーを実現するためのJavaScript

固定サイドバーを実装するにはJavaScriptを使用します。参考までに、具体的な内容は次のとおりで...

CSSは背景画像の画面適応を実現する

ログインページなどのホームページを作成する場合、大きな背景画像を配置する必要があり、さまざまな画面の...

CentOS7 に ElasticSearch 6.4.1 をインストールするための詳細なチュートリアル

1. ElasticSearch 6.4.1 インストール パッケージを次の場所からダウンロードしま...

Vueの最初のプログラムを書くための勉強ノート

目次1. HTMLを書く、最初のVueプログラムビューテンプレートとデータに注意してください決定ルー...

Windows サービス 2016 Datacenter\Stand\Embedded アクティベーション方法 (2021)

管理者権限でcmdを実行する slmgr /ipk CB7KF-BWN84-R7R2Y-793K2-...

JavaScript における Promise の詳細な説明

目次Promise の基本的な使用法: 1. Promiseオブジェクトを作成する2. プロミス方式...

MySQL データベースのインストールと Navicat for MySQL の使用に関するチュートリアル

MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...

Idea は、Web プロジェクトを開始するように Tomcat を設定します。グラフィック チュートリアル

tomcatの設定1. 実行構成をクリック 2. tomcat localを選択 3. tomcat...

CSS3アニメーションジャミングソリューションについての簡単な説明

なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

角度でechartsマップを使用する詳細な説明

目次echartの初期化アプリベースチャートコンポーネントhtml CS app-base-char...

Linuxのlocateコマンドの使い方

01. コマンドの概要実際には、locate コマンドは find -name の別の書き方ですが、...

全画面ページのスクロール効果を実現するJavaScript

JavaScript DOM を読み終えた後、解釈型 JavaScript スクリプト言語に対する...