Сітківки дисплеїв, фонові зображення високої роздільної здатності

Це може здатися дурним питанням.

Якщо я використовую цей фрагмент 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;
    }
}

EDIT

Щоб додати ще трохи до цієї відповіді, ось запит виявлення сітківки, який я, як правило, використовую:

@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 (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-трюках , - це те, що це не враховується повністю. Першоджерело пішов вже далі.

Наприклад, екран 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 mixin від 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 );
}

Більш детальну інформацію про вище зміст читайте ТУТ .