6

私はレスポンシブ デザインをいじくりまわしていて (ついに、そうですか?)、メディア クエリを使用しているときに、「これを Retina スクリーンで使用するとどうなりますか?」という質問を自問しました。

それで、HD スクリーンをターゲットにするときにピクセルを使用するのが適切かどうか疑問に思い始めました。つまり@media only screen and (min-width: 5 billion px)、愚かなことのように思えます。

だから私はベストプラクティスが何であるか疑問に思いました。PX は HD 画面でスケーリングしますか? または、DPI を使用するか、device-pixel-ratioまたはまったく異なるものを使用する必要がありますか?

私の目標は、モバイル専用ページのほぼすべての画面をターゲットにすることです。純粋に練習用であり、何が可能で論理的であるかを自分の目で確かめます。

私の質問は次のとおりです。「未来」のために構築された HD 画面と通常の定義画面の両方に例外を設けることができるオールラウンド ソリューションで、「通常の」画面とは別に HD 画面をターゲットにするにはどうすればよいでしょうか。

4

3 に答える 3

4

160 DPI は、画面 PX 密度のベースラインです。これは、画面 PX とデバイス PX が 1:1 であるためです。Retina ディスプレイは、320 ～ 330 DPI の 2:1 画面 PX とデバイス PX です。

したがって、Retina で機能させることのみを目的としている場合は、

min-device-pixel-ratio: 2;
min-resolution: 192dpi;

大丈夫です。ただし、たとえば Android は、異なる DPI を持つさまざまなデバイスをサポートしています。160 DPI (「mdpi」)、240 DPI (「hdpi」)、320 DPI (「xhdpi」)、およびその中間を含みます。

編集：以下に例を追加しました。

@media
only screen and ( -webkit-min-device-pixel-ratio: 1.25 ),
only screen and ( min--moz-device-pixel-ratio: 1.25 ), 
only screen and ( -o-min-device-pixel-ratio: 1.25 / 1 ),
only screen and ( min-device-pixel-ratio: 1.25 ),
only screen and ( min-resolution: 200dpi ),
only screen and ( min-resolution: 1.25dppx ) {}
于 2013-03-18T08:17:57.727 に答える
2

メタ ビューポート (または非 WindowsPhone8 IE10 の場合は @ms-viewport) 幅 = デバイス幅を介してブラウザーのスケーリングを設定する標準的な方法を使用していると思います。

その場合、幅/高さのメディア クエリで参照する CSS の "px" 単位は、PPI が高いかどうかに関係なく、160ppi 画面上の 1 つの物理ピクセルに非常に大まかに対応します。実際には ~130ppi から ~180ppi の範囲です。

したがって、幅/高さの "px" メディア クエリに一致する物理画面サイズのこの不正確さに問題がない場合は、すぐに進んでください。ハードウェア開発者が定義した「css レイアウト px」から「物理ピクセル」へのスケーリングを有効にしていることを確認してください。最新のほとんどすべてのモバイル デバイスで何らかの形で利用できます。

注: クライアントからより正確な PPI 読み取り値を収集するために、いくつかの巧妙な JavaScript に依存することも可能です。私は現在、モバイルとデスクトップの両方で統一された PPI 値を取得するためにこれを行っています。これは、現在すべての非 IE ブラウザが同様の問題がバグトラッカーに残っており、ピクセルのスケーリング/ズーム/比率/その他に関して、モバイルとデスクトップの間の深刻なアーキテクチャの分裂を示しています

于 2013-03-18T08:51:41.457 に答える
1

通常、emまたはのような相対単位を使用します%。

たとえば、ページ内のすべてが を使用している場合、本文の をem変更するfont-sizeと、すべての要素がフォント サイズに比例して自動スケーリングされます。

言い換えれば、解像度範囲のメディアクエリをコーディングし、画面幅に応じて最上位の親 font-size (ドキュメントの bodyなど) を調整する必要があり、残りのスタイルはこれらのメディアクエリの外にある必要があります。が変更されたため、単純に font-size を変更すると、ページ全体が自動スケーリングされるためfont-sizeです。

ちなみに、min-width「数十億ピクセル」になることはないと思います。今のところ、消費者向けおよびほとんどのプロ向けの画面で解像度が 4K (4096x3113) を超えることはありません。つまり、10 億ピクセルのメディア クエリを使用する必要はないと思います。

于 2013-03-18T08:17:00.590 に答える