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

Program / 글쓴이

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

일반 디스플레이에이 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 의 크기 를 400×400 픽셀 로 두 배로 늘려야합니까?

답변

새로운 고해상도 배경 이미지와 일치하도록 .box div의 크기를 400 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에서는 지원되지 않으므로 대부분의 상황에서 신뢰할 수 없기 때문에 개인적으로 속기 형식을 사용하지 않는 것이 좋습니다.

답변

다음 은 많은 비 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;
       }

}

댓글에서 피드백을받은 후 @ 3rror404가 편집에 포함 되었기 때문에 Webkit / iPhone을 넘어서는 세상이 있습니다. CSS-Tricks 에서 위의 소스로 참조 된 것과 같이 지금까지 대부분의 솔루션에서 나를 괴롭히는 한 가지는 이것이 완전히 고려되지 않았다는 것입니다. 원본 소스는 더 이미 갔다.

예 넥서스 (7) (2012)은 화면이다 이상한와는 tvdpi 화면 device-pixel-ratio의1.325 . 일반 해상도로 이미지를로드하면 보간을 통해 업 스케일링되므로 흐릿합니다. 이 규칙을 미디어 쿼리에 적용하여 최고의 고객 피드백에 성공한 장치를 포함했습니다.

답변

망막 및 비 망막 화면에 동일한 이미지를 사용할 계획이라면 여기에 해결책이 있습니다. 이미지가 200x200있고 맨 윗줄에 두 개의 아이콘이 있고 아랫 줄에 두 개의 아이콘 이 있다고 가정합니다 . 그래서 그것은 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의 또 다른 편리한 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에 대한 자세한 내용은 여기를 참조하십시오 .

답변