Retina 디스플레이, 고해상도 배경 이미지

Retina 디스플레이, 고해상도 배경 이미지

---

이것은 어리석은 질문처럼 들릴 수 있습니다.

일반 디스플레이에이 CSS 스 니펫을 사용하는 경우 ( box-bg.png200px x 200px)

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

레티 나 디스플레이를 대상으로하기 위해 이와 같은 미디어 쿼리를 사용하는 경우 (@ 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 의 크기 를 400x400 픽셀 로 두 배로 늘려야합니까?

---

아니요,하지만 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에서는 지원되지 않으므로 대부분의 상황에서 신뢰할 수 없기 때문에 개인적으로 속기 형식을 사용하지 않는 것이 좋습니다.

---

다음 은 상당수의 비 iOS 기기 (fe : Google Nexus 7 2012 ) 와 같이 인치당 ~ 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;
       }

}

As @3rror404 included in his edit after receiving feedback from the comments, there's a world beyond Webkit/iPhone. One thing that bugs me with most solutions around so far like the one referenced as source above at CSS-Tricks, is that this isn't taken fully into account.
The original source went already further.

As an example the Nexus 7 (2012) screen is a TVDPI screen with a weird device-pixel-ratio of 1.325. When loading the images with normal resolution they are upscaled via interpolation and therefore blurry. For me applying this rule in the media query to include those devices succeeded in best customer feedback.

---

If you are planing to use the same image for retina and non-retina screen then here is the solution. Say that you have a image of 200x200 and have two icons in top row and two icon in bottom row. So, it's four quadrants.

.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 }

Scaling and positioning of the sprite icons to 50% than actual value, you can get the expected result.

---

Another handy SCSS mixin solution by Ryan Benhase.

/****************************
 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 );
}

For more info about above mixin READ HERE.

참고URL : https://stackoverflow.com/questions/16154494/retina-displays-high-res-background-images