Отзивчиви css спрайтове + ретина

Четох много по тази тема последните дни, но не намерих решение. Имам два комплекта спрайтове, един с ниско качество за нормални дисплеи и един с високо качество за ретина дисплеи.

Проблемът ми е, че сайтът ми трябва да реагира, графиките трябва да се променят в зависимост от прозореца на браузъра. Но със свойството background-size изглежда, че не мога да кажа на браузъра да промени размера на спрайта. Ето какво получих досега:

#logo-img {
  max-width: 100%;
  text-indent: -9999px;
  height: 85px;
  width: 360px;
  background-image: url('/images/sprites-sa026cef942.png');
  background-position: 0 -2609px;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: 0 none !important;
  display: block;
  white-space: nowrap;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
    #logo-img {
      background-image: url('/images/sprites-retina-se61e802cf4.png');
      background-position: 0 -2601px;
      -webkit-background-size: 360px, auto;
      -moz-background-size: 360px, auto;
      -o-background-size: 360px, auto;
      background-size: 360px, auto;
    }
}

HTML е

<a href="/bg#" id="logo-img">
  <h1>My logo text</h1>
</a>

Всичко работи добре, освен на мобилни устройства или при преоразмеряване на прозореца на браузъра. Логото се изрязва и не се преоразмерява спрямо прозореца на браузъра. Играех с max-width: 100%; и height: auto;, но това засяга само контурите, не и спрайтовете вътре.

Надявам се някой да знае решение. Не е задължително да е съвместим с IE8, но би било хубаво ;)

РЕДАКТИРАНЕ Преди да използвам спрайтове, използвах background-size: contain;, за да се уверя, че фоновото изображение се преоразмерява до размера на елемента:

#logo-img {
  background:url(../images/sprites-retina/logo.png) no-repeat center center;
  background-size: contain;
  max-width: 100%;
  text-indent:-9999px;
  height: 85px;
  width: 360px;
  overflow: hidden;
  outline: 0 none !important;
  display: block;
  white-space: nowrap;
}

Това работи добре, но след това не мога да използвам spritesheet. Може би от това става ясно какво имам предвид.

РЕДАКТИРАНЕ 2

Направих цигулка http://jsfiddle.net/euvRD/2/


css responsive-design media-queries css-sprites
person 23tux    schedule 26.09.2012    source източник

Отговори (1)


arrow_upward
3
arrow_downward

Мисля, че трябва да премахнете запетаята от background-size редовете и може да искате да зададете и височината на 85px:

-webkit-background-size: 360px 85px;
-moz-background-size: 360px 85px;
-o-background-size: 360px 85px;
background-size: 360px 85px;

Но запетаята е основният проблем тук, според мен. Това помогна ли ви?

person ditscheri    schedule 26.09.2012
comment
хмммм, това е странно, защото нещата с размер на фона се генерират чрез Compass (compass-style.org). Но го пробвах и не помогна, спрайтът вътре все още се изрязва. Някакви други идеи? - person 23tux; 26.09.2012
comment
имаш ли линк към жив пример? или бихте могли да създадете jsfiddle, показващ вашия проблем? - person ditscheri; 26.09.2012
comment
Между другото, преоразмеряването на браузъра не оказва влияние върху device-pixel-ratio, така че вероятно не можете да тествате ефекта във вашия браузър, а само на устройство със съответната резолюция. - person ditscheri; 26.09.2012
comment
Направих цигулка: jsfiddle.net/euvRD. Ако преоразмерите прозореца на браузъра, първата снимка на luigi не се преоразмерява, базира се на таблица със спрайтове. Второто е единично изображение с background-size: contain; и това се преоразмерява - person 23tux; 26.09.2012
comment
Хм, значи искате да правите различни неща наведнъж. За да промените размера на логото, можете да използвате медийна заявка max-width като в този пример: jsfiddle.net/euvRD/2 Но това не използва device-pixel-ratio. Все пак получавате желания ефект от по-висока разделителна способност, тъй като фонът на спрайта се намалява до половината от 998px/2=499px. Не съм много сигурен, независимо дали това помага или не. - person ditscheri; 26.09.2012
comment
благодаря, това може да е възможно решение. Но имам течно оформление и всичко е преоразмерено спрямо прозореца на браузъра. Така че ще трябва да дефинирам няколко стъпки за различна ширина на браузъра. Някаква друга идея? - person 23tux; 26.09.2012