Màn hình hiển thị võng mạc, hình nền có độ phân giải cao

Question

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

Nếu tôi sử dụng đoạn mã CSS này để hiển thị thông thường (Vị trí box-bg.png là 200px 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 .box div đến 400px x 400px để khớp với hình nền có độ phân giải cao mới không?

Answer 1

Không, nhưng bạn cần phải thiết lập các background-size bất động sản để phù hợ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; 
    } 
} 

---

EDIT

Để thêm một chút để câu trả lời này, đây là truy vấn phát hiện võng mạc 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) { 

} 

- Source

NB. Điều này min--moz-device-pixel-ratio: không phải là một lỗi đánh máy. Đây là một lỗi được ghi chép đầy đủ trong một số phiên bản của Firefox và phải được viết như thế này để hỗ trợ các phiên bản cũ hơn (trước Firefox 16). - Source

---

Như @LiamNewmarch đề cập trong các ý kiến ​​dưới đây, bạn có thể bao gồm các background-size ở tốc ký của bạn background khai như vậy:

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

Tuy nhiên, cá nhân tôi sẽ không khuyên sử dụng các hình thức viết tắt là nó không được hỗ trợ trong iOS < = 6 hoặc Android làm cho nó không đáng tin cậy trong hầu hết các trường hợp.

Answer 2

Dưới đây là một giải pháp mà cũng bao gồm cao (er) DPI (MDPI) thiết bị > ~ 160 dots per inch như khá một vài phi iOS Devices (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; 
     } 

} 

Khi @ 3rror404 bao gồm trong chỉnh sửa của mình sau khi nhận được phản hồi từ nhận xét, có một thế giới vượt ra ngoài Webkit/iPhone. Một điều khiến tôi bị lỗi với hầu hết các giải pháp xung quanh cho đến nay giống như một 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 xem xét đầy đủ.
original source đã đi xa hơn.

Ví dụ: màn hình Nexus 7 (2012) là một màn hình TVPI với số lạ device-pixel-ratio of 1.325. Khi tải hình ảnh với độ phân giải bình thường, chúng được nâng lên 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 để bao gồm các thiết bị đó đã thành công trong phản hồi của khách hàng tốt nhất.

Answer 3

Nếu bạn định sử dụng cùng một hình ảnh cho màn hình võng mạc và không phải võng mạc thì đây là giải pháp. Giả sử bạn có hình ảnh 200x200 và 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 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à định vị biểu tượng sprite thành 50% so với giá trị thực, bạn có thể nhận kết quả mong đợi.