Дисплеи Retina, фоновые изображения высокого разрешения

Это может показаться глупым вопросом.

Если я использую этот фрагмент CSS для обычных дисплеев (где box-bg.png200 на 200 пикселей);

.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 до 400 на 400 пикселей, чтобы он соответствовал новому фоновому изображению с высоким разрешением?

Нужно ли мне удвоить размер div .box до 400 на 400 пикселей, чтобы соответствовать новому фоновому изображению с высоким разрешением

Нет, но вам необходимо настроить 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, что делает ее ненадежной в большинстве ситуаций.

Вот решение, которое также включает устройства с высоким (er) DPI ( MDPI ) > ~ 160 точек на дюйм, как многие устройства, отличные от iOS (например, 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-ratioразмером1.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 от Райана Бенхейза .

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

Для получения дополнительной информации о приведенном выше миксине ЧИТАЙТЕ ЗДЕСЬ .