web-dev-qa-db-ja.com

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

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

このCSSスニペットを通常の表示に使用する場合（box-bg.pngは200x200ピクセル）;

.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/[email protected]') no-repeat top left;}
}

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

cssresponsive-designmedia-queries
96
Dean Elliott

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

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

    .box{
        background:url('images/[email protected]') 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/[email protected]') no-repeat top left / 200px 200px;
}

ただし、iOS <= 6またはAndroidでサポートされていないため、ほとんどの状況で省略形を使用することになるため、個人的には短縮形の使用をお勧めしません。

174
Turnip

High（er）DPI（ MDPI ）デバイス>〜160ドット/インチlikeかなりの数の非iOSデバイス（fe：Google Nexus 7 2012）：

.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/[email protected]' ) no-repeat top left / 200px 200px;
       }

}

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

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

13
Volker E.

網膜と非網膜スクリーンに同じ画像を使用する予定がある場合は、ここで解決策があります。 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 );
}

上記のmixinの詳細については READ HERE 。

1
Syed