Значок масштаба из спрайта при обнаружении сетчатки глаза - PullRequest
Новая
       99

Значок масштаба из спрайта при обнаружении сетчатки глаза

0 голосов
/ 06 августа 2020

Я хочу изменить значок на сетчатке. Я использую s css

это мой s css код: 

$icon-shopping-cart-pos: -169px -289px;
$icon-shopping-cart-pos-retina: -336px -578px ;

.icon-shopping-cart {
  background: $sprite-url no-repeat $icon-shopping-cart-pos;
  width: 33px;
  height: 29px;
  @include media('retina2x') {
    background: $sprite-url-retina no-repeat $icon-shopping-cart-pos-retina;
    width: 66px;
    height: 59px;
  }
}

проблема в том, что retina2x имеет множитель поэтому значок становится в два раза больше. Мне нужно изменить значок, но сохранить ту же высоту и ширину, и Retina удвоит его самостоятельно. Это нужно для того, чтобы значок не выглядел пиксельным на сетчатке. Я пробовал использовать background-size, но значок исчезает при добавлении свойства. для мультимедийного миксина я использую include-media

My HTML: 

<button
          type="button"
          @click="handleOnCartClick"
          class="ml-4 button-green btn-cart"
        >
          <i class="icon-shopping-cart  " />
        </button>

Спасибо, что рассмотрели мой вопрос и помогли мне.

1 Ответ

0 голосов
/ 07 августа 2020

Попробовав разного рода s css уловки, я нашел решение. Идея состоит в том, чтобы масштабировать весь спрайт сетчатки, а не только значок. 

.icon-futalis-vet-green {
  background-image: $sprite-url;
  background-repeat: no-repeat;
  background-position: $icon-cart-pos;
  width: 35px;
  height: 35px;
  @include media('retina2x') {
    background-image: $sprite-url-retina !important; 
    background-size:324px 920px !important;
  }
}

Мой исходный спрайт имеет ширину x высоту 324x920, а моя сетчатка вдвое больше.

Итак, масштабируя спрайт сетчатки до половинного размера. Я могу рассматривать свой спрайт как нормальный размер, и мне не нужно менять положение значков. Значок не будет выглядеть пиксельным, потому что я масштабирую его до половинного размера, а множитель сетчатки (соотношение пикселей) восстановит его до исходного размера, и он будет выглядеть так же

Надеюсь, кто-то сочтет это полезным.

...