จอภาพ Retina ภาพพื้นหลังความละเอียดสูง

นี่อาจฟังดูเป็นคำถามโง่ ๆ

ถ้าฉันใช้ตัวอย่าง CSS นี้สำหรับการแสดงผลปกติ ( box-bg.png200px คูณ 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;}
}

ฉันต้องเพิ่มขนาด.boxdiv เป็นสองเท่าเป็น400px คูณ 400px เพื่อให้ตรงกับภาพพื้นหลังความละเอียดสูงใหม่หรือไม่

ฉันต้องเพิ่มขนาด. box div เป็นสองเท่าเป็น 400px คูณ 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 ทำให้ไม่น่าเชื่อถือในสถานการณ์ส่วนใหญ่

นี่คือโซลูชันที่รวมถึงอุปกรณ์DPI ( MDPI ) สูง> ~ 160 จุดต่อนิ้วเหมือนกับอุปกรณ์ที่ไม่ใช่ 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;
       }

}

เนื่องจาก @ 3rror404 รวมอยู่ในการแก้ไขของเขาหลังจากได้รับการตอบรับจากความคิดเห็นมีโลกที่อยู่นอกเหนือจาก Webkit / iPhone สิ่งหนึ่งที่ทำให้ฉันมีปัญหากับโซลูชันส่วนใหญ่จนถึงตอนนี้เช่นเดียวกับที่อ้างถึงเป็นแหล่งที่มาด้านบนที่CSS-Tricksคือสิ่งนี้ไม่ได้ถูกนำมาพิจารณาอย่างเต็มที่ ต้นฉบับไปแล้วต่อไป

ตัวอย่างเช่น Nexus 7 (2012) หน้าจอเป็นหน้าจอ tvdpi กับแปลกdevice-pixel-ratio1.325ของ เมื่อโหลดภาพที่มีความละเอียดปกติภาพเหล่านั้นจะถูกเพิ่มสเกลผ่านการแก้ไขจึงทำให้ภาพเบลอ สำหรับฉันใช้กฎนี้ในแบบสอบถามสื่อเพื่อรวมอุปกรณ์เหล่านั้นประสบความสำเร็จในการตอบรับที่ดีที่สุดของลูกค้า

หากคุณวางแผนที่จะใช้ภาพเดียวกันสำหรับหน้าจอเรตินาและไม่ใช่เรตินานี่คือวิธีแก้ปัญหา สมมติว่าคุณมีรูปภาพ200x200และมีไอคอนสองไอคอนในแถวบนสุดและสองไอคอนในแถวล่างสุด มันคือสี่จตุภาค

.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% คุณจะได้ผลลัพธ์ที่คาดหวัง

วิธีการแก้ปัญหา SCSS mixin อีกที่มีประโยชน์โดยไรอัน 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 );
}

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ mixin ข้างต้นอ่านได้ที่นี่