Wyświetlacze Retina, obrazy tła w wysokiej rozdzielczości

102

To może brzmieć jak głupie pytanie.

Jeśli użyję tego fragmentu kodu CSS do zwykłych wyświetlaczy (gdzie box-bg.pngjest 200 na 200 pikseli);

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

i jeśli użyję takiego zapytania o media, aby skierować reklamy na wyświetlacze siatkówki (z obrazem @ 2x jako wersją o wysokiej rozdzielczości);

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

    .box{background:url('images/[email protected]') no-repeat top left;}
}

Czy muszę podwoić rozmiar elementu .boxdiv do 400 na 400 pikseli, aby dopasować go do nowego obrazu tła w wysokiej rozdzielczości?

Dean Elliott
źródło
Jaki jest rozmiar images/[email protected]? Proszę postaw to pytanie, aby było absolutnie jasne.
TMS

Odpowiedzi:

184

Czy muszę podwoić rozmiar elementu div .box do 400 x 400 pikseli, aby dopasować go do nowego obrazu tła w wysokiej rozdzielczości

Nie, ale musisz ustawić background-sizewłaściwość tak, aby pasowała do oryginalnych wymiarów:

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

    .box{
        background:url('images/[email protected]') no-repeat top left;
        background-size: 200px 200px;
    }
}

EDYTOWAĆ

Aby dodać trochę więcej do tej odpowiedzi, oto zapytanie wykrywania siatkówki, którego zwykle używam:

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

}

- Źródło

NB. To min--moz-device-pixel-ratio:nie jest literówka. Jest to dobrze udokumentowany błąd występujący w niektórych wersjach przeglądarki Firefox i powinien być napisany w ten sposób, aby obsługiwał starsze wersje (starsze niż Firefox 16). - Źródło


Jak @LiamNewmarch wspomniał w komentarzach poniżej, możesz dołączyć background-sizeskróconą backgrounddeklarację w następujący sposób:

.box{
    background:url('images/[email protected]') no-repeat top left / 200px 200px;
}

Jednak osobiście nie radziłbym używać formy skróconej, ponieważ nie jest obsługiwana w systemie iOS <= 6 lub Android, przez co jest zawodna w większości sytuacji.

Rzepa
źródło
jakąś wskazówkę dotyczącą ustawiania rozmiaru tła dla tła całej strony? znam szerokość komponentu x, ale co z y?
Randy L
3
@theOther W takim przypadku prawdopodobnie chcesz użyć background-size: cover;. Pozwoli to zachować proporcje, jednocześnie „pokrywając” całe tło obrazem.
Rzepa
4
Jeśli chcesz, możesz zintegrować background-sizewłasność Into the backgroundtak: background: url('images/[email protected]') no-repeat top left / 200px 200px. Pamiętaj, że przeglądarki, które nie obsługują background-size, zignorują tę regułę.
Liam Newmarch
2
@LiamNewmarch Nie polecałbym sobie, ponieważ Android wydaje się nie rozumieć skróconej formy
Rzepa
@ 3rror404 ah okej, wystarczy. Dzięki!
Liam Newmarch,
16

Oto rozwiązanie, które obejmuje również urządzenia o wysokiej (er) DPI ( MDPI ) > ~ 160 punktów na cal, na przykład kilka urządzeń innych niż iOS (np. 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/[email protected]' ) no-repeat top left / 200px 200px;
       }

}

Jak zamieścił @ 3rror404 w swojej edycji po otrzymaniu opinii od komentarzy, świat wykracza poza Webkit / iPhone. Jedną rzeczą, która wprawia mnie w zakłopotanie w przypadku większości rozwiązań dostępnych do tej pory, takich jak to, o którym mowa powyżej jako źródło w CSS-Tricks , jest to, że nie jest to w pełni brane pod uwagę. Oryginalne źródło
poszedł już dalej.

Jako przykład Nexus 7 (2012) ekran jest ekranem TVDPI z dziwne device-pixel-ratioz1.325 . Podczas ładowania obrazów w normalnej rozdzielczości są one przeskalowywane w górę przez interpolację, a zatem są rozmazane. Dla mnie zastosowanie tej reguły w zapytaniu o media, aby uwzględnić te urządzenia, pozwoliło uzyskać najlepsze opinie klientów.

Volker E.
źródło
1
Obraz 2x z każdego wymiaru ma dokładnie 4x pikseli (np. Teoretycznie można oczekiwać, że będzie miał rozmiar 4x), podczas gdy 1.325 * 1.325 obsługuje tylko wzrost o 1,755625 pikseli. Myślę, że jakość obrazu byłaby w obu przypadkach utracona przy 1.325dppi, ale jeśli przejdziesz na HiDPI, wtedy klient będzie musiał po prostu czekać dłużej na załadowanie strony, będzie miał większe zużycie energii, zmieniając rozmiar obrazu (a tablice Nexusa 7 są dość znany z losowych ponownych uruchomień) i zużywają większą przepustowość. Tak więc radziłbym trzymać się @2xtylko obsługi 2dppx+ klientów.
cnst
3

Jeśli planujesz użyć tego samego obrazu dla siatkówki i ekranu bez siatkówki, oto rozwiązanie. Powiedzmy, że masz obraz 200x200i dwie ikony w górnym rzędzie i dwie ikony w dolnym rzędzie. Więc to cztery ćwiartki.

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

Skalowanie i pozycjonowanie ikon duszków do 50% wartości rzeczywistej, możesz uzyskać oczekiwany rezultat.


Kolejne przydatne rozwiązanie do mieszania SCSS autorstwa Ryana Benhase'a .

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

Więcej informacji na temat powyższej mieszanki CZYTAJ TUTAJ .

Syed
źródło