在视网膜检测上从 sprite 缩放图标

Question

我想更改视网膜上的图标我正在使用 scss

这是我的 scss 代码：

$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

我的HTML:

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

感谢您审阅我的问题并帮助我。

Answer 1

在尝试了各种 scss 技巧后，我找到了解决方案。这个想法是缩放整个视网膜精灵，而不仅仅是图标。

.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，我的视网膜尺寸是原来的两倍。

因此，通过将视网膜精灵缩放到一半大小，我可以像对待正常大小一样对待我的精灵，而且我不需要更改图标位置。该图标看起来不会像素化，因为我将其缩放为一半大小并且视网膜倍增器（像素比）会将其恢复为原始大小并且看起来相同

希望有人觉得这有用。

在视网膜检测上从 sprite 缩放图标

Scale icon from sprite on retina detection

css

sass

vue.js

scss-mixins