Retinaディスプレイ、高解像度の背景画像


102

これはばかげた質問のように聞こえるかもしれません。

このCSSスニペットを通常の表示に使用する場合(box-bg.png200px x 200pxです)。

.box{
    background:url('images/box-bg.png') no-repeat top left;
    width:200px;
    height:200px
}

このようなメディアクエリを使用してRetinaディスプレイをターゲットにすると(@ 2x画像が高解像度バージョンになります);

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/box-bg@2x.png') no-repeat top left;}
}

.box新しい高解像度の背景画像と一致させるために、div のサイズを400px x 400px に2倍にする必要がありますか?


images/box-bg@2x.pngの寸法は?完全に明確になるように質問に答えてください。
TMS

回答:


184

新しい高解像度の背景画像に合わせるために、.box divのサイズを2倍にして400px x 400pxにする必要がありますか

いいえ、ただしbackground-size、元の寸法と一致するようにプロパティを設定する必要があります。

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/box-bg@2x.png') no-repeat top left;
        background-size: 200px 200px;
    }
}

編集する

この答えにもう少し追加するために、私がよく使用する網膜検出クエリを次に示します。

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

-ソース

NB。これmin--moz-device-pixel-ratio:はタイプミスではありません。これは特定のバージョンのFirefoxで十分に文書化されたバグであり、古いバージョン(Firefox 16より前)をサポートするには、このように記述する必要があります。 -ソース


以下のコメントで@LiamNewmarchが言及しているように、次のようにbackground-size短縮形background宣言にを含めることができます。

.box{
    background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}

ただし、短縮形の使用はiOS <= 6またはAndroidではサポートされていないため、ほとんどの状況で信頼性が低いため、個人的にはお勧めしません。


フルページの背景の背景サイズを設定するためのヒントはありますか?xコンポーネントの幅はわかっていますが、yはどうですか?
Randy L

3
@theOtherその場合、おそらくを使用したいでしょうbackground-size: cover;。これにより、背景全体を画像で「カバー」しながら、アスペクト比が維持されます。
カブ

4
必要に応じて、background-sizeプロパティを次のbackgroundように統合できますbackground: url('images/box-bg@2x.png') no-repeat top left / 200px 200px。サポートしていないブラウザはbackground-sizeこのルールを無視することに注意してください。
リアムニューマーチ2013年

2
@LiamNewmarch私はAndroidが省略形を理解していないように私自身をお勧めしません
カブ

@ 3rror404ああ、大丈夫です。ありがとう!
リアムニューマーチ2014年

16

以下は、iOS以外の多くのデバイス(fe:Google Nexus 7 2012)のように、1インチあたり最大160ドットを超える High(er)DPI(MDPI)デバイスも含むソリューションです。

.box {
    background: url( 'img/box-bg.png' ) no-repeat top left;
    width: 200px;
    height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
       only screen and (    min--moz-device-pixel-ratio: 1.3 ),
       only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
       only screen and (         min-device-pixel-ratio: 1.3 ),
       only screen and ( min-resolution: 124.8dpi ),
       only screen and ( min-resolution: 1.3dppx ) {

       .box {
           background: url( 'img/box-bg@2x.png' ) no-repeat top left / 200px 200px;
       }

}

コメントからフィードバックを受け取った後、@ 3rror404が彼の編集に含まれているので、Webkit / iPhoneを超えた世界があります。CSS-Tricksで上記のソースとして参照されているもののように、これまでのほとんどのソリューションで私を悩ませている1つの点は、これが完全に考慮されていないことです。オリジナルのソース
さらに、すでに行ってきました。

例として、Nexus 7(2012)画面は奇妙なのTVDPI画面device-pixel-ratioです1.325。画像を通常の解像度でロードすると、補間によって拡大されるため、ぼやけます。私がメディアクエリにこのルールを適用して、それらのデバイスを含めることで、最高の顧客フィードバックが得られました。


1
1.325 * 1.325がサポートするピクセル数は1.755625のみですが、各次元の画像2xはピクセルが正確に4xです(たとえば、理論的にはサイズが4xであると予想できます)。1.325dppiでは画像の品質がどちらかの方法で失われると思いますが、HiDPIを使用すると、クライアントはページの読み込みをより長く待つ必要があり、画像のサイズを変更して消費電力が高くなります(Nexus 7のテーブルはかなり高いです)ランダムリブートで知られています)、より多くの帯域幅を消費します。したがって、+クライアント@2xのみに提供されることに固執することをお勧めし2dppxます。
cnst

3

網膜画面と非網膜画面に同じ画像を使用する場合は、ここが解決策です。イメージが200x200あり、上の行に2つのアイコンがあり、下の行に2つのアイコンがあるとします。つまり、4つの象限です。

.sprite-of-icons {
  background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
  background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
}

.sp-logo-1 { background-position: 0 0; }

/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 { background-position: -25px 0 }
.sp-logo-3 { background-position: 0 -25px }
.sp-logo-3 { background-position: -25px -25px }

スプライトアイコンのスケーリングと配置を実際の値の50%にすると、期待どおりの結果が得られます。


Ryan Benhaseによるもう1つの便利なSCSSミックスインソリューション。

/****************************
 HIGH PPI DISPLAY BACKGROUNDS
*****************************/

@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";

  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;

  @media all and (-webkit-min-device-pixel-ratio : 1.5),
  all and (-o-min-device-pixel-ratio: 3/2),
  all and (min--moz-device-pixel-ratio: 1.5),
  all and (min-device-pixel-ratio: 1.5) {
    background-image: url("#{$at2x_path}"); 
  }
}

div.background {
  @include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
}

上記のミックスインの詳細については、こちらをお読みください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.