Màn hình Retina, hình nền độ phân giải cao

Điều này nghe có vẻ như một câu hỏi ngớ ngẩn.

Nếu tôi sử dụng đoạn mã CSS này cho màn hình thông thường ( box-bg.png200px x 200px);

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

và nếu tôi sử dụng truy vấn phương tiện như thế này để nhắm mục tiêu màn hình võng mạc (Với hình ảnh @ 2x là phiên bản có độ phân giải cao);

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

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

Tôi có cần tăng gấp đôi kích thước của .boxdiv lên 400px x 400px để khớp với hình nền độ phân giải cao mới không?

Tôi có cần tăng gấp đôi kích thước của div .box lên 400px x 400px để khớp với hình nền độ phân giải cao mới không

Không, nhưng bạn cần đặt thuộc background-sizetính để khớp với kích thước ban đầu:

@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;
    }
}

BIÊN TẬP

Để bổ sung thêm một chút cho câu trả lời này, đây là truy vấn phát hiện võng mạc mà tôi có xu hướng sử dụng:

@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) { 

}

- Nguồn

NB. Đây min--moz-device-pixel-ratio:không phải là lỗi đánh máy. Đây là một lỗi đã được ghi nhận rõ ràng trong một số phiên bản Firefox nhất định và nên được viết như thế này để hỗ trợ các phiên bản cũ hơn (trước Firefox 16). - Nguồn

Như @LiamNewmarch đã đề cập trong các nhận xét bên dưới, bạn có thể bao gồm khai báo background-sizeviết tắt của mình backgroundnhư sau:

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

Tuy nhiên, cá nhân tôi không khuyên bạn nên sử dụng biểu mẫu viết tắt vì nó không được hỗ trợ trong iOS <= 6 hoặc Android khiến nó không đáng tin cậy trong hầu hết các tình huống.

Đây là một giải pháp cũng bao gồm các thiết bị DPI ( MDPI ) cao (er) > ~ 160 chấm mỗi inch như một số thiết bị không phải 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/box-bg@2x.png' ) no-repeat top left / 200px 200px;
       }

}

Như @ 3rror404 đã đưa vào bản chỉnh sửa của mình sau khi nhận được phản hồi từ các bình luận, có một thế giới bên ngoài Webkit / iPhone. Một điều khiến tôi gặp lỗi với hầu hết các giải pháp cho đến nay như giải pháp được tham chiếu như nguồn ở trên tại CSS-Tricks , là điều này không được tính đến đầy đủ.
Nguồn gốc đã đi xa hơn.

Như một ví dụ Nexus 7 (2012) màn hình là một màn hình tvdpi với một kỳ lạ device-pixel-ratiocủa1.325 . Khi tải các hình ảnh có độ phân giải bình thường, chúng được nâng cấp thông qua nội suy và do đó bị mờ. Đối với tôi, việc áp dụng quy tắc này trong truy vấn phương tiện truyền thông để đưa những thiết bị đó vào đã thành công trong phản hồi tốt nhất của khách hàng.

Nếu bạn đang có kế hoạch sử dụng cùng một hình ảnh cho màn hình có võng mạc và không có võng mạc thì đây là giải pháp. Giả sử bạn có một hình ảnh 200x200và có hai biểu tượng ở hàng trên cùng và hai biểu tượng ở hàng dưới cùng. Vì vậy, nó là bốn góc phần tư.

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

Chia tỷ lệ và vị trí của các biểu tượng sprite thành 50% so với giá trị thực tế, bạn có thể nhận được kết quả mong đợi.

Một giải pháp mixin SCSS tiện dụng khác của 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 );
}

Để biết thêm thông tin về mixin trên, ĐỌC TẠI ĐÂY .