1

background-size: cover を使用していて、解像度が 2880x1880 の Retina MacBook Pro で画像がきれいに見えるようにしたい場合、画像をその解像度にするだけでよいのでしょうか、それとも 2 倍にする必要がありますか?網膜であるため、その解像度は見栄えがよくなります（たとえば、サイトに800px x 400pxの画像があるが、網膜で見栄えを良くするために400px x 200pxで表示される場合など）。

.bg {
     color:#CCC;
    background-attachment:fixed; 
    background-repeat: no-repeat; 
    -moz-background-size: cover;
    -webkit-background-size: cover;
     background-size: cover;
     margin: 0;
     padding: 0;
    }

ありがとうございます。

4

1 に答える 1

1

デバイスの解像度とほぼ同じ画像を作成します。最終的な画像サイズが少し異なるように、ブラウザー/webclip chrome 用に少し調整することをお勧めします。

詳細については、カスタム アイコンと画像作成のガイドラインを参照してください。

追加の背景

Retina ディスプレイ デバイスの devicePixelRation は 2 です。これは、デバイスに依存しないピクセルに対する物理ピクセルの比率です。癖モードから：

ディップは、幅/高さのメディア クエリとメタ ビューポートのデバイス幅に情報を供給するために使用される抽象的なピクセルです。それらは、網膜デバイスと非網膜デバイスの違いを見ることで最もよく説明されます.

iPad を例にとると、ビューポートを device-width に設定すると、次のようになります ( Safari は常に DIPS を使用します - quirksmode を参照してください)。

               DIPS        Physical
               --------   ---------
non-retina:    768x1024    768x1024
    retina:    768x1024   1536x2048

DIPS に基づいてマークアップをレイアウトしますが、物理ピクセル (網膜ディスプレイの場合は x2) に基づく画像を使用します。

これを調べる別の方法は次のとおりです。網膜の経験則は非網膜画像の 2 倍のサイズであるため2x (768x1024)、網膜に使用するか、次のようにします。1536x2048

また、ブラウザーのクロムが占有する不動産にも注意してください。たとえば、ステータス バーは画面全体から 20 ピクセルを占めます。

于 2013-08-10T15:59:10.673 に答える