ピクセル 解決 通常、モニター解像度と呼ばれるものは、実際にはモニターの物理的な解像度ではなく、デスクトップによって設定された解像度を指します。ただ、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 を使用する方法の詳細なグラフィック説明
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
まず第一に、私はウェブデザイナーです。具体的には、私は XHTML フロントエンド デザイナーです。...
この記事では、アコーディオン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
1. 空のディレクトリを作成する $ cd /home/xm6f/dev $ mkdir myapp...
目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...
この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。...
私はかなり昔に CSS に触れましたが、フローティングについてはいつも混乱していました。私の理解が浅...
この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...
一般的に、アーカイブされたファイルや圧縮されたファイルの内容を表示するには、まず解凍してから表示する...
1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...
この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...
画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...
目次概要フロントエンド知識システムフロントエンドの3つの要素プレゼンテーション層 (CSS)動作レイ...
Vue+ElementUI Treeの使い方は参考までに。具体的な内容は以下のとおりです。 フロント...